<th class="note">Note</th>
</tr>
<tr>
- <td class="note">For 2.4 platform, the Enventor is supported in Ubuntu and Windows. And, for 2.3.1 platform, it is supported only in Ubuntu.</td>
+ <td class="note">In the 2.4 platform, the Enventor is supported in Ubuntu and Windows®. In the 2.3.1 platform, it is supported in Ubuntu only.</td>
</tr>
</tbody>
</table>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
- <script type="text/javascript" src="../scripts/snippet.js"></script>
- <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
- <title>Resource 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"/></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">Managing Resources in the SDK</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Resource Manager</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'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/
- res/
- contents/
- LDPI /
- basicui.png
- MDPI/
- basicui.png
- basicui.png
- 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. For example, in case of the mobile profile, Z1 has a small screen (profile factor: 0.7) and the 1.8 base scale value, so LDPI is the proper DPI. Z3 has a large screen (profile factor: 0.8) and the 2.6 base scale value, so MDPI is the proper DPI.</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">
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<res xmlns="http://tizen.org/ns/rm">
- <group-image folder="contents">
- <node folder="contents/LDPI" screen-dpi-range="from 0 to 240"/>
- <node folder="contents/MDPI" screen-dpi-range="from 241 to 300"/>
- </group-image>
-</res>
-</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 Manager</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 overridden by the IDE during the packaging process. You can disable the override in the project properties in the IDE (<strong>Properties > Tizen SDK > Package</strong>).</td>
- </tr>
- </tbody>
- </table>
-
-<h3>Resource Manager View</h3>
-<p>The <strong>Resource Manager</strong> view helps you to place resources to support specific device configurations, such as different screen densities.</p>
-
-<p>In the <strong>Resource Manager</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 Manager</strong> view is not visible, open it by selecting <strong>Window > Show View > Other > Tizen > Resource Manager</strong> from the IDE menu.</td>
- </tr>
- </tbody>
- </table>
-
-<p>To place the <span style="font-family: Courier New,Courier,monospace">rsc1.edc</span> file and the images referenced by the file 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 Manager</strong> view.
-<p align="center"><img alt="Resource directory hierarchy" src="../images/fallback_directory.png" /></p>
-</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">edje</span> folder and drop it into the proper tab list view area in the <strong>Resource Manager</strong> view.
-
-<p>The following figure shows the Tab list view (on the left) and the Folding list view (on the right) of the <strong>Resource Manager</strong> view. You can switch between the views using the buttons in the <strong>Resource Manager</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 id="tablist" align="center"><img alt="Tab and folding lists" src="../images/fallback_lists.png" /></p>
-</li></ol>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">All images used by EDC file must be placed in the <span style="font-family: Courier New,Courier,monospace">edje_res</span> folder created by the SDK. The <span style="font-family: Courier New,Courier,monospace">edje_res</span> folder is excluded from the <span style="font-family: Courier New,Courier,monospace">.tpk</span> package file.</td>
- </tr>
- </tbody>
- </table>
-
-<h2 id="example" name="example">Managing Resources in the SDK</h2>
-
-<p>The following steps provide a quick example 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 Manager" 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>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The <strong>Resource Manager</strong> is supported only in 2.4 platform. If the <strong>Resource Manager</strong> view is not supported, check the <strong>Project Version</strong> and the <strong>Api Version</strong> in tizen-manifest.xml.</td>
+ <td class="note">The Resource Manager tool is supported in the 2.4 platform only. If the <strong>Resource Manager</strong> view is not supported, check the <span style="font-family: Courier New,Courier,monospace">version</span> and <span style="font-family: Courier New,Courier,monospace">api-version</span> attributes in the <span style="font-family: Courier New,Courier,monospace"><manifest></span> element of the <a href="manifest_text_editor_n.htm">application manifest file</a>.</td>
</tr>
</tbody>
</table>
-
+
<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>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">If the <strong>Resource Manager</strong> view is not visible, open it by selecting <strong>Window > Show View > Other > Resource Manager</strong> from the IDE menu.</td>
+ <td class="note">If the <strong>Resource Manager</strong> view is not visible, open it by selecting <strong>Window > Show View > Other > Tizen > Resource Manager</strong> from the IDE menu.</td>
</tr>
</tbody>
</table>
<p><img alt="Mobile native" src="../images/mobile_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>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The Storyboard is supported only in 2.4 platform.</td>
+ <td class="note">The Storyboard is supported in the 2.4 platform only.</td>
</tr>
</tbody>
</table>
</body>
-</html>
+</html>
\ No newline at end of file
<p align="center"><img alt="UI Builder" src="../images/nuib_ui_builder.png" /></p>
<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
</tr>
<tr>
- <td class="note">For 2.4 platform, the UI Builder is supported in Ubuntu and Windows. And, for 2.3.1 platform, it is supported only in Ubuntu.</td>
- </tr>
-</tbody>
-</table>
+ <td class="note">In the 2.4 platform, the UI Builder is supported in Ubuntu and Windows®. In the 2.3.1 platform, it is supported in Ubuntu only.</td>
+ </tr>
+ </tbody>
+ </table>
<h2 id="views" name="views">Supported Views and Editors</h2>
<p>Palette</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 applications of 2.4 platform:
+<li>Supported UI components in the 2.4 platform:
<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 applications of 2.3.1 platform:
+<li>Supported UI components in the 2.3.1 platform:
<p>Scroller, Grid, Table, Box, Panes, Button, Check, Radio, Entry, Spinner, Slider, Naviframe, List, Genlist, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout</p></li>
</ul>
</li>
</body>
-</html>
+</html>
\ No newline at end of file
<td>2.2.1</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
- <td>Specify this key, if the application requires the database encryption feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
+ <td>Specify this key, if the application requires the database encryption feature.</td>
<td>2.2.1</td>
- </tr>
+ </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.4</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms.cbs</span></td>
- <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms.cbs</span></td>
+ <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td>
<td>2.2.1</td>
- </tr>
+ </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.2.1</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
- <td>Specify this key, if the application requires the database encryption feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
+ <td>Specify this key, if the application requires the database encryption 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>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms.cbs</span></td>
- <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms.cbs</span></td>
+ <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td>
<td>2.2.1</td>
- </tr>
+ </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>
<ol>
<li><p>If you have made changes to the application after testing it, <a href="building_app_n.htm">rebuild the application</a>.</p> </li>
<li><p>Select the project in the <strong>Project Explorer</strong> view.</p></li>
- <li><p>In the project context menu, select <strong>Project > Build Package </strong>.</p></li>
+ <li><p>In the project context menu, select <strong>Project > Build Package</strong>.</p></li>
</ol>
</ul> <p>If the application binary does not exist, it is built automatically for the Emulator.</p> <p>If many active Emulator instances are connected, select the Emulator to run the application from the dialog box.</p></li>
<li><p>The debug messages are displayed in the IDE's <strong>Console</strong> view. To see the GDB console, in the <strong>Console</strong> view, click the <strong>Display Selected Console</strong> button and select the option containing <strong>gdb</strong>. With the GDB console, you can also execute GDB commands.</p> <p>To display verbose GDB output in the GDB console:</p>
<ul>
- <li>Right-click the <strong>Project Explorer</strong> view and select <strong>Debug As > Debug Configurations</strong>.</li>
- <li>On the <strong>Remote</strong> tab, select <strong>Show verbose messages in console</strong> check box.</li>
- <li>Click <strong>Debug</strong>.</li>
+ <li>Right-click the <strong>Project Explorer</strong> view and select <strong>Debug As > Debug Configurations</strong>.</li>
+ <li>On the <strong>Remote</strong> tab, select the <strong>Show verbose messages in console</strong> check box.</li>
+ <li>Click <strong>Debug</strong>.</li>
</ul> </li>
<li><p>Use the application in the Emulator as you would in a target device.</p>
ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default, I18N_UCALENDAR_GREGORIAN, &ucal);
if (I18N_ERROR_NONE != ret)
{
- dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() is failed (%d)\n", ret);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() failed (%d)\n", ret);
return -1;
}
ret = i18n_ucalendar_get_milliseconds(ucal, &date);
if (I18N_ERROR_NONE != ret)
{
- dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() is failed (%d)\n", ret);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() failed (%d)\n", ret);
i18n_ucalendar_destroy(ucal);
return -1;
<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>
+<p class="figure">Figure: Service Adaptor structure</p>
+<p style="text-align:center;"><img alt="Service Adaptor structure" src="../../images/service_adaptor_structure.png"/></p>
-<p>The main feature of the Service Adaptor API is to connect adaptors to and disconnect them from the Service Adaptor Client though D-Bus. The Service adaptor uses 2 path types:</p>
+<p>The main feature of the Service Adaptor API is to connect adaptors to and disconnect them from the Service Adaptor Client though D-Bus. The Service Adaptor uses 2 path types:</p>
<ul>
<li><strong>Logical path</strong>
<p>The path of the root file system. It starts from the root path ("/"), and you can use the path like in Linux (for example, "/folder1/image1.jpg").</p>
<p>To start a plugin, use the following process:</p>
-<ol><li>Create a Service adaptor with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create()</span> function.</li>
-<li>With a valid Service adaptor handler, iterate through all installed plugins with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_foreach_plugin()</span> function.</li>
+<ol><li>Create a Service Adaptor with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create()</span> function.</li>
+<li>With a valid Service Adaptor handler, iterate through all installed plugins with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_foreach_plugin()</span> function.</li>
<li>Inside the callback (invoked for each plugin), get the <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> value, which is passed to the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create_plugin()</span> function.</li>
<li>Request a start initialization for the service plugin with the <span style="font-family: Courier New,Courier,monospace">service_plugin_start()</span> function.</li></ol>
<td>The platform returns the number of bits per pixel supported by the device for this key. The value depends on the screen, and is typically 8, 16, 24, or 32.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.dpi</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
- <td>The platform returns the number of dots per inch supported by the device for this key.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.height</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
- <td>The platform returns the height of the screen in pixels supported by the device for this key.</td>
- </tr>
- <tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.large</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size for the coordinate system.</td>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.normal</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 normal screen size for the coordinate system.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.dpi</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td>The platform returns the number of dots per inch supported by the device for this key.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.height</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td>The platform returns the height of the screen in pixels supported by the device for this key.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.hdmi</span></td>
<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a rectangular screen shape.</td>
</tr>
<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform always returns <span style="font-family: Courier New,Courier,monospace">true</span>, if the device supports any screen sizes and resolutions.</td>
+ </tr>
+ <tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.large</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size.</td>
<td>The platform always returns <span style="font-family: Courier New,Courier,monospace">false</span> for this key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform always returns <span style="font-family: Courier New,Courier,monospace">true</span>, if the device supports any screen sizes and resolutions.</td>
- </tr>
- <tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</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 240 x 400 resolution for the normal screen size.
</tr>
</tbody>
</table>
- <p>You can launch NFC applications based on the NDEF message content using the <a href="../application/application_w.htm#controls">application control</a> functionalities. For example, if the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/wellknown</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and an NFC-enabled device reads an NFC tag or receives an NDEF message whose first NDEF record has a record type (<span style="font-family: Courier New,Courier,monospace">tnf</span> value) set as <span style="font-family: Courier New,Courier,monospace">NFC_RECORD_TNF_WELL_KNOWN</span>, the NFC application is launched.</p>
-<p>NFC applications can also be launched by the transaction of the card emulation functionality. NFC devices can communicate with point of sales (POS) terminals using the card emulation functionality to, for example, make a payment. If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span> or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/off_host_apdu_service</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and a secure element transaction occurs, the NFC application is launched.</p>
-<p>NFC applications can also be launched by the transaction of the HCE functionality. NFC application can communicate with point of sales (POS) terminals using the HCE functionality to, for example, make a payment. If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/host_apdu_service</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and a HCE transaction occurs, the NFC application is launched.</p>
-<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 event when the default wallet is changed. For example, in <strong>Setting > NFC > 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>The following table lists the NFC operations, scheme and mime.</p>
+ <p>You can launch NFC applications based on the NDEF message content using the <a href="../application/application_w.htm#controls">application control</a> functionalities:</p>
+
+ <ul>
+ <li>NFC application can be launched by the receipt of an NDEF message or by the reading of an NFC tag.
+ <p>If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/wellknown</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and an NFC-enabled device reads an NFC tag or receives an NDEF message whose first NDEF record has a record type (<span style="font-family: Courier New,Courier,monospace">tnf</span> value) set as <span style="font-family: Courier New,Courier,monospace">NFC_RECORD_TNF_WELL_KNOWN</span>, the NFC application is launched.</p></li>
+ <li>NFC applications can be launched by the transaction of the card emulation functionality. NFC devices can communicate with point of sales (POS) terminals using the card emulation functionality to, for example, make a payment.
+ <p>If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span> or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/off_host_apdu_service</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and a secure element transaction occurs, the NFC application is launched.</p></li>
+ <li>NFC applications can be launched by the transaction of the HCE functionality. The NFC application can communicate with point of sales (POS) terminals using the HCE functionality to, for example, make a payment.
+ <p>If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/host_apdu_service</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and an HCE transaction occurs, the NFC application is launched.</p></li>
+ <li>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 event when the default wallet is changed. For example, in <strong>Setting > NFC > Set Default Wallet App</strong>, if the default wallet is changed, an application control with this operation is sent to the selected application (wallet).</li>
+ </ul>
+
+<p>The following table lists the NFC operations, URI scheme and mime.</p>
<table border="1">
<caption>
Table: NFC operations
<tbody>
<tr>
<th>Operation</th>
- <th>URI scheme </th>
+ <th>URI scheme</th>
<th>MIME</th>
</tr>
<tr>
</ul> </td>
<td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
</tr>
- <tr>
+ <tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span></td>
<td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
<td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<li><a href="wearable_w/compass_ww.htm">Compass</a></li>
<li><a href="wearable_w/demo3d_ww.htm">Demo3D</a></li>
<li><a href="wearable_w/digitalwatch_ww.htm">DigitalWatch</a></li>
+ <li><a href="wearable_w/filemanager_ww.htm">FileManager</a></li>
<li><a href="wearable_w/heartratemonitor_ww.htm">HeartRateMonitor</a></li>
<li><a href="wearable_w/hellotizen_ww.htm">HelloTizen</a></li>
<li><a href="wearable_w/metaldetector_ww.htm">MetalDetector</a></li>
<li><a href="mobile_n/alarm_sd_mn.htm">Alarm</a></li>
<li><a href="mobile_n/appcommon_sd_mn.htm">Application Common</a></li>
<li><a href="mobile_n/application_control_sd_mn.htm">Application Control</a></li>
+ <li><a href="mobile_n/attach_panel_sd_mn.htm">Attach Panel</a></li>
<li><a href="mobile_n/badge_sd_mn.htm">Badge</a></li>
<li><a href="mobile_n/bluetoothchat_sd_mn.htm">Bluetooth Chat</a></li>
<li><a href="mobile_n/bundle_sd_mn.htm">Bundle</a></li>
<li><a href="mobile_n/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/resource_manager_sd_mn.htm">Resource Manager</a></li>
+ <li><a href="mobile_n/resource_management_sd_mn.htm">Resource Management</a></li>
<li><a href="mobile_n/sample_account_sd_mn.htm">Sample Account</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="wearable_n/rectsettings_sd_wn.htm">(Rectangle) Settings</a></li>
<li><a href="wearable_n/rectuidialer_sd_wn.htm">(Rectangle) UI Dialer</a></li>
<li><a href="wearable_n/rectwidgetviewer_sd_wn.htm">(Rectangle) Widget Viewer</a></li>
+ <li><a href="wearable_n/ambientweather_sd_wn.htm">Ambient Weather</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>
</div>
<h1>Attach Panel Sample Overview</h1>
-<p>The Attach Panel sample application demonstrates how to use Attach Panel API to quickly create attachments. The API
-allows you to add files stored on the device to your application as well as to create new attachments on the spot.</p>
-
-<table>
-<col/>
-<tr>
- <td>
- <p class="figure">Figure 1: Attach Panel sample app main view</p>
- <p align="center"><img alt="Attach Panel sample app main view" src="../images/attach_panel_main_view.png" /></p>
- </td>
- <td>
- <p class="figure">Figure 2: Attach Panel sample app view with the attach panel visible</p>
- <p align="center"><img alt="Attach Panel sample app view with the attach panel visible" src="../images/attach_panel_main_view_with_items.png" /></p>
- </td>
- <td>
- <p class="figure">Figure 3: Attach Panel sample app view with filled attachment's gengrid</p>
- <p align="center"><img alt="Attach Panel sample app view with filled attachment's gengrid" src="../images/attach_panel_main_view_full.png" /></p>
- </td>
-</tr>
-</table>
-
-<p>The Attach Panel API provides functions that allow you to quickly attach various types of files to your application and create new attachments
- without having to explicitly launch other apps. The Attach Panel module takes care of creating its UI and getting the data from the device. All you need to do is to create
- an attach panel and specify which types of attachments you want to be able to generate.</p>
-
-<p>The types of attachments you can add to your application using Attach Panel are defined by the content categories. You can choose one or more of the following categories:</p>
+<p>The Attach Panel sample application demonstrates how you can use the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html">Attach panel</a> API to create attachments. You can add files stored on the device to your application as well as create new attachments on the spot without having to explicitly launch other applications.</p>
+<p>The following figure illustrates the application views (the opening view on the left, the view with the minimized attach panel in the middle, and the view with a gengrid of created or selected attachments on the right).</p>
+
+ <p class="figure">Figure: Attach Panel views</p>
+ <p align="center"><img alt="Attach Panel views" src="../images/attach_panel_main_view.png" /> <img alt="Attach Panel views" src="../images/attach_panel_main_view_with_items.png" /> <img alt="Attach Panel views" src="../images/attach_panel_main_view_full.png" /></p>
+
+<p>The application opens with the main view:</p>
+
+<ul>
+<li>Click <strong>Add attachment</strong> to display the minimized attach panel at the bottom of the screen, while the size of the application layout is adjusted to fit on the rest of the screen.
+<p>To expand the panel to fill the entire screen, swipe the minimized panel up.</p></li>
+<li>Use the attach panel to select or create files.
+<p>The files are stored by the application in a gengrid. Each gengrid item corresponds to a different file and is represented by a category icon (image, voice recording, or file), depending on the content category used to create it.</p></li>
+<li>Click the items in the gengrid to launch the default application for viewing the specified file.
+<p>The applications are launched using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">App Common</a> API.</p></li></ul>
+
+<p>The Attach Panel module takes care of creating its UI and getting the data from the device. All you need to do is to create an attach panel and specify which attachment types you want to be able to generate.</p>
+
+<p>The available attachment types are defined by the following content categories:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_IMAGE</span> - attach images from Gallery;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CAMERA</span> - take a picture to be attached;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VOICE</span> - record an audio file to be attached;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VIDEO</span> - attach video files from Gallery;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_AUDIO</span> - attach audio files from My Files;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR</span> - attach calendar data from Calendar;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CONTACT</span> - attach contact data from Contacts;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_MYFILES</span> - attach files from My Files;</li>
- <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER</span> - record a video file to be attached.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_IMAGE</span>: Attach images from the Gallery.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CAMERA</span>: Take a picture to be attached.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VOICE</span>: Record an audio file to be attached.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VIDEO</span>: Attach video files from the Gallery.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_AUDIO</span>: Attach audio files from My Files.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR</span>: Attach calendar data from the Calendar.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CONTACT</span>: Attach contact data from the Contacts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_MYFILES</span>: Attach files from My Files.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER</span>: Record a video file to be attached.</li>
</ul>
-<p>This sample application uses <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_IMAGE</span> (Fig. 4),
-<span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CAMERA</span> (Fig. 5),
-<span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VOICE</span> (Fig. 6) and
-<span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_MYFILES</span> (Fig. 7) content categories.</p>
-
- <p>When the <span style="font-family: Courier New,Courier,monospace">'Add attachment'</span> button of the sample application is clicked, the attach panel is displayed
- at the bottom of the screen while the application's layout's size is adjusted to fit on the rest of the screen (see Fig. 2). The panel can be expanded
- to fill the entire screen by swiping the minimized panel up. See Fig. 4-7 for minimized and expanded versions of the panels that were implemented in this application.</p>
-<p>The application allows you to pick or create files using Attach Panel which are later stored by the application in a gengrid. Each gengrid item
- corresponds to a different file and is represented by a category icon (image, voice recording or file) depending on the category of Attach Panel
- used for creating it (see Fig. 3). After an item is clicked, the default application for viewing the specified file is launched using App Common API.</p>
-
-<table>
-<col/>
-<tr>
- <td>
- <p class="figure">Figure 4: Image Attach Panel (minimized and expanded)</p>
- <p align="center"><img alt="Image Attach Panel (minimized and expanded)" src="../images/attach_panel_images_panel.png" /></p>
- </td>
- <td>
- <p class="figure">Figure 5: Camera Attach Panel (minimized and expanded)</p>
- <p align="center"><img alt="Camera Attach Panel (minimized and expanded)" src="../images/attach_panel_camera_panel.png" /></p>
- </td>
-</tr>
-<tr>
- <td>
- <p class="figure">Figure 6: Voice Attach Panel (minimized and expanded)</p>
- <p align="center"><img alt="Voice Attach Panel (minimized and expanded)" src="../images/attach_panel_voice_panel.png" /></p>
- </td>
- <td>
- <p class="figure">Figure 7: More Attach Panel (minimized and expanded)</p>
- <p align="center"><img alt="More Attach Panel (minimized and expanded)" src="../images/attach_panel_more_panel.png" /></p>
- </td>
-</tr>
-</table>
+<p>The Attach Panel sample application uses the <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_IMAGE</span>,
+<span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CAMERA</span>,
+<span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VOICE</span>, and
+<span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_MYFILES</span> content categories. The following figures show the minimized and expanded views when the related attachment type is selected.</p>
+
+ <p class="figure">Figure: Image attach panel</p>
+ <p align="center"><img alt="Image attach panel" src="../images/attach_panel_images_panel.png" /></p>
+
+ <p class="figure">Figure: Camera attach panel</p>
+ <p align="center"><img alt="Camera attach panel" src="../images/attach_panel_camera_panel.png" /></p>
+
+ <p class="figure">Figure: Voice attach panel</p>
+ <p align="center"><img alt="Voice attach panel" src="../images/attach_panel_voice_panel.png" /></p>
+
+ <p class="figure">Figure: More attach panel</p>
+ <p align="center"><img alt="More attach panel" src="../images/attach_panel_more_panel.png" /></p>
+
<h2>Prerequisites</h2>
-<p>To ensure proper application execution, the following privileges must be specified:</p>
+<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/recorder</span> - to use <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VOICE</span> attachment category;</li>
- <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediastorage</span> - to use <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_IMAGE</span> attachment category;</li>
- <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/camera</span> - to use <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CAMERA</span> attachment category;</li>
- <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span> - to add content categories on the More tab and launch relevant apps - in case of this application, the additional category is <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_MYFILES</span> which corresponds to My Files app.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/recorder</span> (to use the <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_VOICE</span> attachment category)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediastorage</span> (to use the <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_IMAGE</span> attachment category)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/camera</span> (to use the <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_CAMERA</span> attachment category)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span> (to add content categories on the <strong>More</strong> tab and launch relevant applications; in this application, the <span style="font-family: Courier New,Courier,monospace">ATTACH_PANEL_CONTENT_CATEGORY_MYFILES</span> category to launch My Files application)</li>
</ul>
<h2>Implementation</h2>
-<p>In order to use the Attach Panel API, you need to include the <span style="font-family: Courier New,Courier,monospace"><attach_panel.h></span> header file in your application.</p>
+<p>To use the Attach panel API, you must include the <span style="font-family: Courier New,Courier,monospace"><attach_panel.h></span> header file in your application.</p>
+
+<h3>Creating an Attach Panel</h3>
-<h3>Creating an attach panel</h3>
+<p>When the <strong>Add attachment</strong> button is clicked for the first time, the following code is executed:</p>
-<p>When the <span style="font-family: Courier New,Courier,monospace">'Add attachment'</span> button is clicked for the first time, the code presented in the snippet below is executed. An attach panel is created using
-<span style="font-family: Courier New,Courier,monospace">attach_panel_create()</span> function. The panel has to be anchored to the app's conformant which should be passed as the first argument to the create function.
-After the attach panel is created successfully, content categories have to be defined using <span style="font-family: Courier New,Courier,monospace">attach_panel_add_content_category()</span> function.</p>
-<p>There are two callbacks to be registered using the following functions:</p>
+<ol>
+<li>An attach panel is created using the <span style="font-family: Courier New,Courier,monospace">attach_panel_create()</span> function, and anchored to the application conformant passed as the first parameter.</li>
+<li>The content categories are defined using the <span style="font-family: Courier New,Courier,monospace">attach_panel_add_content_category()</span> function.</li>
+<li>The necessary callbacks are registered using the following functions:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">attach_panel_set_result_cb()</span> - to get the data that the user selects from the attach panel (files' paths);</li>
- <li><span style="font-family: Courier New,Courier,monospace">attach_panel_set_event_cb()</span> - to get notifications about events from the attach panel.</li>
-</ul>
+ <li><span style="font-family: Courier New,Courier,monospace">attach_panel_set_result_cb()</span>: to get the data that the user selects from the attach panel (file paths)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">attach_panel_set_event_cb()</span>: to get notifications about events from the attach panel</li>
+</ul></li></ol>
<pre class="prettyprint">
-if (attach_panel_create(vd.conform, &vd.attach_panel) != ATTACH_PANEL_ERROR_NONE) {
- /* ... Error handling */
+if (attach_panel_create(vd.conform, &vd.attach_panel) != ATTACH_PANEL_ERROR_NONE)
+{
+ // Error handling
}
attach_panel_add_content_category(vd.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, NULL);
attach_panel_set_event_cb(vd.attach_panel, __ap_event_cb, NULL);
</pre>
+<p>You only have to create the attach panel once during the application execution.</p>
-<p>You only have to create the attach panel once during the app's execution. Its visibility can be controlled with
-<span style="font-family: Courier New,Courier,monospace">attach_panel_show()</span> and <span style="font-family: Courier New,Courier,monospace">attach_panel_hide()</span>
-functions. When the panel is created, it is hidden by default. The <span style="font-family: Courier New,Courier,monospace">attach_panel_get_visability()</span>
-function can be used to check if the panel is visible.</p>
+<p>You can control the attach panel visibility with the <span style="font-family: Courier New,Courier,monospace">attach_panel_show()</span> and <span style="font-family: Courier New,Courier,monospace">attach_panel_hide()</span> functions. When the panel is created, it is hidden by default. Use the <span style="font-family: Courier New,Courier,monospace">attach_panel_get_visibility()</span>
+function to check whether the panel is visible.</p>
-<p>The code snippet below shows what happens when the <span style="font-family: Courier New,Courier,monospace">'Add attachment'</span> button is clicked after the attach panel
-has been created. First, the panel's visability is checked. If the panel is in the hidden state, <span style="font-family: Courier New,Courier,monospace">attach_panel_show()</span>
-function is invoked to show it. The panel is hidden automatically after the user clicks the soft back key.</p>
+<p>The following example shows what happens when the user clicks <strong>Add attachment</strong> after the attach panel has been created:</p>
+
+<ol>
+<li>The panel visibility is checked.
+<p>If the panel is in the hidden state, the <span style="font-family: Courier New,Courier,monospace">attach_panel_show()</span> function is invoked to show it. The panel is hidden automatically after the user clicks the soft back key.</p>
<pre class="prettyprint">
bool visible = false;
-if (vd.attach_panel) {
- if (attach_panel_get_visibility(vd.attach_panel, &visible) != ATTACH_PANEL_ERROR_NONE)
- /* ... Error handling */
+if (vd.attach_panel)
+{
+ if (attach_panel_get_visibility(vd.attach_panel, &visible) != ATTACH_PANEL_ERROR_NONE)
+ // Error handling
if (!visible)
attach_panel_show(vd.attach_panel);
}
-</pre>
+</pre></li>
-<p>After the user selects or creates attachments, the <span style="font-family: Courier New,Courier,monospace">__ap_result_cb()</span> callback function is invoked. To get the files' paths,
-<span style="font-family: Courier New,Courier,monospace">app_control_get_extra_data_array()</span> function has to be invoked on the
-<span style="font-family: Courier New,Courier,monospace">app_control_h</span> result handle that is passed to the callback function. The <span style="font-family: Courier New,Courier,monospace">selected</span>
-variable is an array of strings in which the paths will be stored.</p>
+<li>After the user selects or creates attachments, the <span style="font-family: Courier New,Courier,monospace">__ap_result_cb()</span> callback function is invoked.
+<p>To get the file paths, the <span style="font-family: Courier New,Courier,monospace">app_control_get_extra_data_array()</span> function is invoked on the <span style="font-family: Courier New,Courier,monospace">app_control_h</span> result handle that is passed to the callback function. The <span style="font-family: Courier New,Courier,monospace">selected</span> variable is an array of strings in which the paths are stored.</p>
<pre class ="prettyprint">
-static void __ap_result_cb(attach_panel_h attach_panel, attach_panel_content_category_e content_category, app_control_h result, app_control_result_e result_code, void *user_data)
+static void
+__ap_result_cb(attach_panel_h attach_panel, attach_panel_content_category_e content_category,
+ app_control_h result, app_control_result_e result_code, void *user_data)
{
- /* ... Variables declaration */
+ // Variable declaration
- if (app_control_get_extra_data_array(result, APPCONTROL_EXTRA_DATA_SELECTED, &selected, &length) != APP_CONTROL_ERROR_NONE) {
- /* Error handling */
+ if (app_control_get_extra_data_array(result, APPCONTROL_EXTRA_DATA_SELECTED, &selected, &length)
+ != APP_CONTROL_ERROR_NONE)
+ {
+ // Error handling
}
- /* Check content category to set proper gengrid item's icon */
- switch (content_category) {
- case ATTACH_PANEL_CONTENT_CATEGORY_IMAGE:
- case ATTACH_PANEL_CONTENT_CATEGORY_CAMERA:
- __get_app_resource(VIEW_IMAGES_IMAGE, img_path, (int)PATH_MAX);
- break;
- case ATTACH_PANEL_CONTENT_CATEGORY_VOICE:
- __get_app_resource(VIEW_IMAGES_VOICE, img_path, (int)PATH_MAX);
- break;
- case ATTACH_PANEL_CONTENT_CATEGORY_MYFILES:
- __get_app_resource(VIEW_IMAGES_FILE, img_path, (int)PATH_MAX);
- break;
- default:
- return;
+ // Check content category to set proper gengrid item icon
+ switch (content_category)
+ {
+ case ATTACH_PANEL_CONTENT_CATEGORY_IMAGE:
+ case ATTACH_PANEL_CONTENT_CATEGORY_CAMERA:
+ __get_app_resource(VIEW_IMAGES_IMAGE, img_path, (int)PATH_MAX);
+ break;
+ case ATTACH_PANEL_CONTENT_CATEGORY_VOICE:
+ __get_app_resource(VIEW_IMAGES_VOICE, img_path, (int)PATH_MAX);
+ break;
+ case ATTACH_PANEL_CONTENT_CATEGORY_MYFILES:
+ __get_app_resource(VIEW_IMAGES_FILE, img_path, (int)PATH_MAX);
+ break;
+ default:
+ return;
}
- for (; i < length; i++)
- elm_gengrid_item_append(vd.grid, vd.gic, eina_stringshare_add(img_path), __grid_item_clicked_cb, selected[i]);
+ for (; i < length; i++)
+ elm_gengrid_item_append(vd.grid, vd.gic, eina_stringshare_add(img_path),
+ __grid_item_clicked_cb, selected[i]);
}
-</pre>
+</pre></li></ol>
-<h3>Launching default application for viewing a file</h3>
-<p>App Control API is used to launch the default application for viewing a file defined by URI (the file path). Below is a code snippet from the sample application
-that is responsible for that. For more information about App Control usage, see the App Control sample application or the App Control tutorial.</p>
+<h3>Launching the Default Application for Viewing a File</h3>
+<p>Use the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> API to launch the default application for viewing a file defined by the URI (file path):</p>
<pre class="prettyprint">
-
-void attach_panel_launch_default_view_app(char *uri)
+void
+attach_panel_launch_default_view_app(char *uri)
{
app_control_h service;
- if (app_control_create(&service) != APP_CONTROL_ERROR_NONE)
- /* ... Error handling */
+ if (app_control_create(&service) != APP_CONTROL_ERROR_NONE)
+ // Error handling
if (app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW) != APP_CONTROL_ERROR_NONE ||
- app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW) != APP_CONTROL_ERROR_NONE ||
- app_control_set_uri(service, uri) != APP_CONTROL_ERROR_NONE ||
- app_control_send_launch_request(service, NULL, NULL) != APP_CONTROL_ERROR_NONE) {
- /* ... Error handling */
+ app_control_set_uri(service, uri) != APP_CONTROL_ERROR_NONE ||
+ app_control_send_launch_request(service, NULL, NULL) != APP_CONTROL_ERROR_NONE)
+ {
+ // Error handling
}
if (app_control_destroy(service) != APP_CONTROL_ERROR_NONE)
- /* ... Error handling */
+ // Error handling
}
</pre>
+<p>For more information about the app control usage, see the <a href="application_control_sd_mn.htm">Application Control</a> sample application and the <a href="../../../org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm">App Control</a> tutorial.</p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
ret = bt_socket_send_data(ad->socket_fd, main_text, strlen(main_text)+1);
if (ret == -1)
{
- _E("[bt_socket_send_data] send to fail : %s", main_text);
+ _E("[bt_socket_send_data] failed to send: %s", main_text);
noti = bt_noti_popup_create(ad->navi, "Send Failed", EINA_FALSE);
evas_object_show(noti);
}
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<ul>
<li>Select request
<p>This function reads data from the database:</p>
-<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">column_list</span> parameter is an array of strings used as the text after the SELECT keyword in a SQL query. The <span style="font-family: Courier New,Courier,monospace"><a href = "#ui-struct-sql">column_name_entry</a></span> entry field in the SQL view can be used as the input for the <span style="font-family: Courier New,Courier,monospace">column_list</span>. However, note that the string from the entry has to be converted (using the <span style="font-family: Courier New,Courier,monospace">elm_entry_markup_to_utf8()</span> function) from markup to the utf8 format. If not, some characters, such as '<', cannot be used. After the conversion, '\n' can be used as a delimiter when the text from the entry field is transformed into the array of strings.</p></li>
+<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">column_list</span> parameter is an array of strings used as the text after the SELECT keyword in a SQL query. The <span style="font-family: Courier New,Courier,monospace"><a href = "#ui-struct-sql">column_name_entry</a></span> entry field in the SQL view can be used as the input for the <span style="font-family: Courier New,Courier,monospace">column_list</span>. However, note that the string from the entry has to be converted (using the <span style="font-family: Courier New,Courier,monospace">elm_entry_markup_to_utf8()</span> function) from markup to the UTF-8 format. If not, some characters, such as '<', cannot be used. After the conversion, '\n' can be used as a delimiter when the text from the entry field is transformed into the array of strings.</p></li>
<li><p>The <span style="font-family: Courier New,Courier,monospace">column_count</span> variable is the count of the <span style="font-family: Courier New,Courier,monospace">column_list</span> elements.</p></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">where</span> parameter is a string, which can contain any correct SQL WHERE entry. The <span style="font-family: Courier New,Courier,monospace"><a href = "#ui-struct-sql">where_entry</a></span> entry field is used to provide an input for this parameter. This text (like any text from an entry widget) has to be converted to utf8 as well.</p></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">where</span> parameter is a string, which can contain any correct SQL WHERE entry. The <span style="font-family: Courier New,Courier,monospace"><a href = "#ui-struct-sql">where_entry</a></span> entry field is used to provide an input for this parameter. This text (like any text from an entry widget) has to be converted to UTF-8 as well.</p></li>
<li><p>If one of the sort methods is chosen using the radio buttons, a column name has to be provided using the <span style="font-family: Courier New,Courier,monospace"><a href = "#ui-struct-sql">sort_column_entry</a></span> field. The <span style="font-family: Courier New,Courier,monospace">order</span> parameter is a concatenation of the <span style="font-family: Courier New,Courier,monospace">sort_column_entry</span> string and an appropriate sort text, such as <span style="font-family: Courier New,Courier,monospace">Num ASC</span>.</p></li></ul>
<pre class="prettyprint">
data_control_sql_select(data_control_h provider, char **column_list, int column_count,
app->status.is_mainview = EINA_TRUE;
main_view_data *data = calloc(1, sizeof(main_view_data));
- RETVM_IF(!data, RESULT_TYPE_FAIL_ALLOCATE_MEMORY, "Fail allocate memory");
+ RETVM_IF(!data, RESULT_TYPE_FAIL_ALLOCATE_MEMORY, "Failed to allocate memory");
data->view.app = app;
data->view.navi = parent;
_main_view_fill(main_view_data *data)
{
int res = fs_manager_get_storage_list(data->view.app->manager, &data->storage_list);
- RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to get storage list");
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Failed to get storage list");
genlist_widget_content_set(data->genlist_widget, data->storage_list);
app->status.is_mainview = EINA_FALSE;
list_view_data *data = calloc(1, sizeof(list_view_data));
- RETVM_IF(!data, RESULT_TYPE_FAIL_ALLOCATE_MEMORY, "Fail allocate memory");
+ RETVM_IF(!data, RESULT_TYPE_FAIL_ALLOCATE_MEMORY, "Failed to allocate memory");
data->list_view.app = app;
data->list_view.navi = parent;
data->list_view.navi_layout = ui_utils_layout_add(data->list_view.navi, _list_view_del_cb, data);
if (!data->list_view.navi_layout)
{
- ERR("Fail to create Layout");
+ ERR("Failed to create Layout");
_list_view_destroy(data);
return RESULT_TYPE_FAIL;
int result = fs_manager_get_file_list(data->list_view.app->manager, data->list_view.curr_path, &data->file_list);
if (result != RESULT_TYPE_OK)
{
- ERR("Fail to get file list");
+ ERR("Failed to get file list");
evas_object_del(data->list_view.navi_layout);
return result;
result = navigator_add_view(data->list_view.app->navigator, title, &data->list_view);
if (result != RESULT_TYPE_OK)
{
- ERR("Fail to add view to naviframe");
+ ERR("Failed to add view to naviframe");
evas_object_del(data->list_view.navi_layout);
return result;
result = _list_view_create_widgets(data);
if (result != RESULT_TYPE_OK)
{
- ERR("Fail to create widgets");
+ ERR("Failed to create widgets");
evas_object_del(data->list_view.navi_layout);
return result;
Eina_List *path_list = NULL;
int res = navi_path_storage_get_path_list(app->path_storage, &path_list);
- RETVM_IF(res != RESULT_TYPE_OK, res, "Fail get folders list for navigation widget");
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Failed to get folders list for navigation widget");
navi_path_widget_content_set(data->navi_path_wgt, path_list);
elm_object_item_data_set(data->list_view.navi_item, data);
RETVM_IF(!view, NULL, "View object is NULL");
navi_path_widget *widget = calloc(1, sizeof(navi_path_widget));
- RETVM_IF(!widget, NULL, "Fail allocate memory");
+ RETVM_IF(!widget, NULL, "Failed to allocate memory");
widget->table_size = 0;
widget->view = view;
_popup_new_folder_type_create(view_data *view)
{
Evas_Object *popup = _popup_new(view->navi, NULL, view);
- RETVM_IF(!popup, RESULT_TYPE_INVALID_ARG, "Fail to create popup");
+ RETVM_IF(!popup, RESULT_TYPE_INVALID_ARG, "Failed to create popup");
elm_object_part_text_set(popup, "title,text", POPUP_TEXT_TITLE_NEW_FOLDER);
int res = _popup_editfield_add(popup);
- RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to add editfield");
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Failed to add editfield");
res = _popup_buttons_add(popup, _popup_create_folder_ok_cb, _popup_cancel_cb);
- RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to add buttons");
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Failed to add buttons");
return RESULT_TYPE_OK;
}
_popup_new(Evas_Object *parent, const char *text, const void *data)
{
Evas_Object *popup = elm_popup_add(parent);
- RETVM_IF(!popup, NULL, "Fail to create popup");
+ RETVM_IF(!popup, NULL, "Failed to create popup");
eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, _popup_back_button_cb, NULL);
_popup_editfield_add(Evas_Object *popup)
{
Evas_Object *entry = elm_entry_add(popup);
- RETVM_IF(!entry, RESULT_TYPE_INVALID_ARG, "Fail to create entry");
+ RETVM_IF(!entry, RESULT_TYPE_INVALID_ARG, "Failed to create entry");
elm_layout_theme_set(entry, "entry", "base-single", "editfield");
evas_object_size_hint_weight_set(entry, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
widget->view->app->status.curr_mode = MODE_DEFAULT;
int res = list_view_copy_items(widget->view);
- RETM_IF(res != RESULT_TYPE_OK, "Fail to copy file");
+ RETM_IF(res != RESULT_TYPE_OK, "Failed to copy file");
res = list_view_update(widget->view->navi_item, UPDATE_TYPE_GENLIST | UPDATE_TYPE_CTRL_BAR_MODE);
- RETM_IF(res != RESULT_TYPE_OK, "Fail to update view");
+ RETM_IF(res != RESULT_TYPE_OK, "Failed to update view");
res = popup_create(widget->view, POPUP_TYPE_COPY_MOVE);
- RETM_IF(res != RESULT_TYPE_OK, "Fail to create popup");
+ RETM_IF(res != RESULT_TYPE_OK, "Failed to create popup");
}
</pre>
</li>
app_data *app = list_data->list_view.app;
int res = clipboard_add_data(app->clipboard, list_data->file_list);
- RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to copy files");
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Failed to copy files");
res = clipboard_set_operation(app->clipboard, OPERATION_TYPE_COPY);
- RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to set operation");
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Failed to set operation");
return RESULT_TYPE_OK;
}
int ret = 0;
ui_app_lifecycle_callback_s event_callback;
- app_event_handler_h handlers[5] = {NULL, };
+ app_event_handler_h handlers[5] = {NULL,};
event_callback.create = __create_app;
event_callback.terminate = __terminate_app;
__get_available_locale_cb(const char *locale, void *data)
{
viewdata_s *vd = (viewdata_s *)data;
- char fpath[512] = { 0, };
+ char fpath[512] = {0,};
char *res_path = app_get_resource_path();
// Limit the number of languages to those which are supported by this application
// the display language in a char string, a new memory area is reserved
int32_t str_len = i18n_ustring_get_length(i18n_language);
*display_language = (char *)calloc(str_len + 1, sizeof(char));
- if (!(*display_language)) {
+ if (!(*display_language))
+ {
controller_log(DLOG_ERROR, "Function calloc() failed.");
return false;
static void
MapLocationView(Evas_Object *view_layout)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
app_get_resource(MAP_VIEW_EDJ_FILE, edj_path, (int)PATH_MAX);
static Evas_Object*
__create_map_object(Evas_Object *layout)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
if (m_map_evas_object != NULL)
{
__route_result_obtained = false;
__route_result = NULL;
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
app_get_resource(ROUTE_VIEW_EDJ_FILE, edj_path, (int)PATH_MAX);
Evas_Object *m_view_layout = elm_layout_add(parent);
static Evas_Object*
__create_route_searchbox(Evas_Object *parent)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
app_get_resource(ROUTE_VIEW_EDJ_FILE, edj_path, (int)PATH_MAX);
Evas_Object *searchbox_layout = elm_layout_add(parent);
return;
}
- char resultText[1024] = {0, };
+ char resultText[1024] = {0,};
strcpy(resultText, "");
char *street = NULL;
ret = mc_server_create(&ad->player_controller);
if (ret != MEDIA_CONTROLLER_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_create() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_create() failed. err = %d", ret);
return;
}
{
ret = mc_server_send_command_reply(ad->player_controller, client_name, 0, bundle_reply);
if (ret != MEDIA_CONTROLLER_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_send_command_reply() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_send_command_reply() failed. err = %d", ret);
return;
}
ret = mc_server_unset_playback_state_command_received_cb(ad->player_controller);
if (ret != MEDIA_CONTROLLER_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_unset_playback_state_command_received_cb() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_unset_playback_state_command_received_cb() failed. err = %d", ret);
}
ret = mc_server_unset_custom_command_received_cb(ad->player_controller);
if (ret != MEDIA_CONTROLLER_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_unset_playback_state_command_received_cb() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_unset_playback_state_command_received_cb() failed. err = %d", ret);
}
ret = mc_server_destroy(ad->player_controller);
if (ret != MEDIA_CONTROLLER_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_destroy() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "mc_server_destroy() failed. err = %d", ret);
}
}
</pre>
if (notify_data->notification)
{
notification_status_message_post(app_message_text);
- const char *array_result[] = { result_1_text, result_2_text, NULL };
- const char *array_key[] = { SERVICE_DATA_TEXT, SERVICE_DATA_TO, NULL };
+ const char *array_result[] = {result_1_text, result_2_text, NULL};
+ const char *array_key[] = {SERVICE_DATA_TEXT, SERVICE_DATA_TO, NULL};
// Set extra data to app control
notification_post(notify_data->notification);
}
oauth_full->token = calloc(1, sizeof(oauth_provider_token_s));
oauth_full->token->acc_tok_secret = token_sec;
- char url[MAX_URL_LEN] = {0, };
+ char url[MAX_URL_LEN] = {0,};
snprintf(url, MAX_URL_LEN - 1, "%s?oauth_token=%s", oauth_full->provider_info->auth_url, oauth_full->token_temp);
__show_web_view(oauth_full, url);
{
snprintf(note->sound_name, MAXNAMLEN, "black_%d.wav", index + 1);
- char part_name[MAXNAMLEN] = { 0 };
+ char part_name[MAXNAMLEN] = {0};
snprintf(part_name, MAXNAMLEN, "note_black_%d", index + 1);
elm_object_part_content_set(note->ad->win->layout, part_name, note->button);
{
snprintf(note->sound_name, MAXNAMLEN, "white_%d.wav", index + 1);
- char part_name[MAXNAMLEN] = { 0 };
+ char part_name[MAXNAMLEN] = {0};
snprintf(part_name, MAXNAMLEN, "note_white_%d", index + 1);
elm_object_part_content_set(note->ad->win->layout, part_name, note->button);
ret = ui_app_main(argc, argv, &event_callback, &ad);
if (ret != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() failed. err = %d", ret);
}
return ret;
{
if (!puzzle_change(ad, 4))
{
- _E("Fail puzzle change");
+ _E("Failed to change puzzle");
}
}
else if (elm_check_state_get(ad->check2) == 1)
{
if (!puzzle_change(ad, 5))
{
- _E("Fail puzzle change");
+ _E("Failed to change puzzle");
}
}
evas_object_del(popup);
<h1>Resource Management Sample Overview</h1>
-<p>The Resource Manager sample application demonstrates how you can extract objects from the application's previously created resources. The object extraction process is based on the environment the application is running in: language and the screen DPI. Currently supported objects that can be handled by the Resource Manager are images, sounds, layouts, and custom binary files. The operational principle of the Resource Manager application is to deliver an object relevant to the current application environment.</p>
+<p>The Resource Management sample application demonstrates how you can extract objects from the application's previously created resources. The object extraction process is based on the environment the application is running in: language and the screen DPI. Currently supported objects that can be handled by the Resource Management are images, sounds, layouts, and custom binary files. The operational principle of the Resource Management application is to deliver an object relevant to the current application environment.</p>
<p>The sample application demonstrates how to automatically pick an image and layout matching:</p>
<ul>
<li>Language changed in the Settings application</li>
<li>Device screen DPI</li>
</ul>
<p>The following figure illustrates the view of the application running in four different screen DPI settings as well as different language settings.</p>
-<p id="app-screenshot" class="figure">Figure: Resource Manager application screens</p>
+<p id="app-screenshot" class="figure">Figure: Resource Management application screens</p>
<p align="center">
<img alt="Main view of the application running with the DPI=240" src="../images/resource_management_ldpi_initial_view.png" />
<img alt="Main view of the application running with the DPI=300" src="../images/resource_management_mdpi_initial_view.png" />
<img alt="Main view of the application running with the DPI=480" src="../images/resource_management_fr_fr_lang_view.png" />
</p>
-<p>The Resource Manager sample application provides a user interface for automatic change preview only. To influence the application, change the environment settings:</p>
+<p>The Resource Management sample application provides a user interface for automatic change preview only. To influence the application, change the environment settings:</p>
<ul>
<li>Language: change the display language in the Settings application by going to <strong>Settings application > Language and input > Display language</strong>.</li>
<li>Screen DPI: Create a new mobile emulator image with the default density value altered with a custom one, chosen from the following ranges:
</li>
</ul>
<p>The following figure shows the structure of the user interface. EDJE layout scripts are used.</p>
- <p id="ui-struct" class="figure">Figure: Resource Manager layout structure</p>
+ <p id="ui-struct" class="figure">Figure: Layout structure</p>
<p align="center">
- <img alt="Resource Manager layout structure" src="../images/resource_management_ui_layout_sd_mn.png" />
+ <img alt="Layout structure" src="../images/resource_management_ui_layout_sd_mn.png" />
</p>
<p>The final application view is created by embedding the proper components into the layout depicted above. The following figure shows the resulting UI view.</p>
- <p id="ui-view" class="figure">Figure: Resource Manager application UI view</p>
+ <p id="ui-view" class="figure">Figure: Application UI view</p>
<p align="center">
- <img alt="Resource Manager application's UI view" src="../images/resource_management_ui_view_sd_mn.png" />
+ <img alt="Application UI view" src="../images/resource_management_ui_view_sd_mn.png" />
</p>
<p>The application workflow can be divided into 3 logical pipelines:</p>
<li>Image and layout extraction relevant to the current language</li>
</ul>
<p>The workflow is described by the following figure.</p>
- <p id="workflow" class="figure">Figure: Resource Manager application workflow</p>
+ <p id="workflow" class="figure">Figure: Application workflow</p>
<p align="center">
<img alt="Application workflow" src="../images/resource_management_workflow_sd_mn.png" />
</p>
<h2>Prerequisites</h2>
<p>To ensure proper application execution, the resources must be created using the <a href="../../../org.tizen.devtools/html/native_tools/resource_manager_n.htm">Resource Manager</a> tool. It enables you to create the resource structure assigned to an application.</p>
- <h3 id="res-man">Resource Manager</h3>
+ <h3 id="res-man">Resource Manager Tool</h3>
<p>The Resource Manager tool is launched by opening the <strong>Resource Manager</strong> view from the IDE menu: <strong>Window > Show View > Other > Tizen > Resource Manager</strong>. Press <img alt="Resource Manager settings button" src="../images/resource_management_res_manager_settings_sd_mn.png"/> to open the Resource Configuration Dialog, where you can define separate resource directories for languages and resolution settings. The related directory names are created automatically and are not changeable. For this sample application, the resource structure is defined as shown in the following figure.</p>
<p class="figure">Figure: Resource Configuration Dialog view</p>
<p align="center">
calendar_error_e error = CALENDAR_ERROR_NONE;
error = calendar_connect();
- WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() is failed(%x)", error);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() failed (%x)", error);
// remove all events from genlist
main_view_data *ad = (main_view_data *)data;
// add new events
calendar_list_h list = NULL;
error = calendar_db_get_all_records(_calendar_event._uri, 0, 0, &list);
- WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_db_get_all_records() is failed(%x)", error);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_db_get_all_records() failed (%x)", error);
int count = 0;
error = calendar_list_get_count(list, &count);
- WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_list_get_count() is failed(%x)", error);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_list_get_count() failed (%x)", error);
calendar_record_h record = NULL;
int index = 0;
calendar_error_e error = CALENDAR_ERROR_NONE;
error = calendar_connect();
- RETM_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() is failed(%x)", error);
+ RETM_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() failed (%x)", error);
calendar_record_h record = create_record_with_presets();
int record_index = 0;
error = calendar_db_insert_record(record, &record_index);
- WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_db_insert_record() is failed(%x)", error);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_db_insert_record() failed (%x)", error);
if (record)
{
}
error = calendar_disconnect();
- WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_disconnect() is failed(%x)", error);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_disconnect() failed (%x)", error);
elm_naviframe_item_pop(ad->navi);
}
</pre>
edit_view_data *view_data = (edit_view_data *)data;
int error = calendar_connect();
- RETM_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() is failed(%x)", error);
+ RETM_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() failed (%x)", error);
const char *title = elm_entry_entry_get(view_data->title_entry);
set_record_title(view_data->event_record, title);
{
// Create index's elm_layout component
Evas_Object *indice = NULL;
- char edje_path[PATH_MAX] = {0, };
+ char edje_path[PATH_MAX] = {0,};
indice = elm_layout_add(parent);
// Obtain the path to the edje file
<td><a href="application_control_sd_mn.htm">Application Control</a></td>
<td>Demonstrates how you can search for applications supporting specific classes of operations and run them using the operation contexts.</td>
</tr>
- <tr>
+ <tr>
<td><a href="attach_panel_sd_mn.htm">Attach Panel</a></td>
- <td>Demonstrates how to use Attach Panel to quickly create attachments.</td>
- </tr>
+ <td>Demonstrates how you can quickly create attachments with the attach panel.</td>
+ </tr>
<tr>
<td><a href="badge_sd_mn.htm">Badge</a></td>
<td>Demonstrates how you can handle application badges.</td>
</tr>
<tr>
<td><a href="resource_management_sd_mn.htm">Resource Management</a></td>
- <td>Demonstrates how you can use the <a href="../../..//org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">Resource Manager</a> API together with the SDK's Resource Manager to benefit from task automation.</td>
+ <td>Demonstrates how you can use the <a href="../../..//org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">Resource Manager</a> API together with the SDK's Resource Manager tool to benefit from task automation.</td>
</tr>
<tr>
<td><a href="sample_account_sd_mn.htm">Sample Account</a></td>
{
if (image->format == CAMERA_PIXEL_FORMAT_JPEG)
{
- char filename[PATH_MAX] = { '\0' };
+ char filename[PATH_MAX] = {'\0'};
size_t size = _main_view_get_file_path(filename, sizeof(filename));
DBG("%s", filename);
RETM_IF(0 == size, "_main_view_get_filename() failed");
.name = "Acceleration",
.value_names = axes,
.value_count = 3,
- .axes = { -1, 1, 1 }
+ .axes = {-1, 1, 1}
},
}
</pre>
<h2>Implementation</h2>
-<p>To use the service adaptor:</p>
+<p>To use the Service Adaptor:</p>
<ol>
-<li>Connect to the service adaptor and search for any installed plugins:
+<li>Connect to the Service Adaptor and search for any installed plugins:
<pre class="prettyprint">
static void
ret = service_adaptor_create(&service_adaptor);
if (SERVICE_ADAPTOR_ERROR_NONE != ret)
{
- log_error("Service adaptor create failed");
+ log_error("Service Adaptor create failed");
return;
}
ret = ui_app_main(argc, argv, &event_callback, NULL);
if (ret != APP_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() failed. err = %d", ret);
return ret;
}
img = evas_object_image_filled_add(ad->e);
if (!img)
{
- _E("Fail to filled image");
+ _E("Failed to add filled image");
free(ad->canvas);
return NULL;
colorselector = _create_colorselector(layout, data);
if (!colorselector)
{
- _E("fail to create colorselector");
+ _E("Failed to create colorselector");
evas_object_del(layout);
return NULL;
Evas_Object *btn = NULL;
char *buf = NULL;
- char dir[256] = {0, };
+ char dir[256] = {0,};
int i=0;
ad = data;
int ret = app_control_create(&app_control);
if (ret != APP_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Creating app_control handle is failed [%s]", get_error_message(ret));
+ dlog_print(DLOG_INFO, LOG_TAG, "Creating app_control handle failed [%s]", get_error_message(ret));
return;
}
ret = app_control_set_app_id(app_control, SYNC_ADAPTER_SERVICE_APP_ID);
if (ret != APP_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Setting app id is failed [%s]", get_error_message(ret));
+ dlog_print(DLOG_INFO, LOG_TAG, "Setting app id failed [%s]", get_error_message(ret));
return;
}
dlog_print(DLOG_INFO, LOG_TAG, "Launching sync service app successfully [%s]", SYNC_ADAPTER_SERVICE_APP_ID);
else
{
- dlog_print(DLOG_INFO, LOG_TAG, "Launching sync service app is failed [%s]", get_error_message(ret));
+ dlog_print(DLOG_INFO, LOG_TAG, "Launching sync service app failed [%s]", get_error_message(ret));
return;
}
int ret = 0;
ui_app_lifecycle_callback_s event_callback = {0,};
- app_event_handler_h handlers[5] = {NULL, };
+ app_event_handler_h handlers[5] = {NULL,};
event_callback.create = app_create;
event_callback.terminate = app_terminate;
ret = ui_app_main(argc, argv, &event_callback, &ad);
if (ret != APP_ERROR_NONE)
{
- _E("ui_app_main() is failed. err = %d", ret);
+ _E("ui_app_main() failed. err = %d", ret);
}
return ret;
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Create window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
{
state: "default" 0.0;
fixed: 1 1;
- rel1 { relative: 0.0 0.0; }
- rel2 { relative: 1.0 1.0; }
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 1.0;}
color: 0 0 0 255;
}
}
static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Create window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Create window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
{
state: "default" 0.0;
align: 0.5 0.5;
- rel1 { relative: 0.0 0.0; offset: 0 0;}
- rel2 { relative: 1.0 1.0; offset: -1 -1;}
+ rel1 {relative: 0.0 0.0; offset: 0 0;}
+ rel2 {relative: 1.0 1.0; offset: -1 -1;}
image
{
normal: "before.png";
{
state: "changed" 0.0;
align: 0.5 0.5;
- rel1 { relative: 0.0 0.0; offset: 0 0;}
- rel2 { relative: 1.0 1.0; offset: -1 -1;}
+ rel1 {relative: 0.0 0.0; offset: 0 0;}
+ rel2 {relative: 1.0 1.0; offset: -1 -1;}
image
{
normal: "after.png";
description
{
state: "default" 0.0;
- rel1 { relative: 0.6 0.1; }
- rel2 { relative: 0.9 0.4; }
+ rel1 {relative: 0.6 0.1;}
+ rel2 {relative: 0.9 0.4;}
visible: 0;
}
}
description
{
state: "default" 0.0;
- rel1 { relative: 0.25 0.25; }
- rel2 { relative: 0.75 0.75; }
+ rel1 {relative: 0.25 0.25;}
+ rel2 {relative: 0.75 0.75;}
color: 0 136 170 255;
map
{
\r
if (elm_win_wm_rotation_supported_get(ad->win)) \r
{\r
- int rots[4] = { 0, 90, 180, 270 };\r
+ int rots[4] = {0, 90, 180, 270};\r
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);\r
}\r
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);\r
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
rotate(green_rect, 45);
evas_object_show(green_rect);
- char img_path[PATH_MAX] = { 0, };
+ char img_path[PATH_MAX] = {0,};
app_get_resource("tizen.png", img_path, PATH_MAX);
Evas_Object *img = evas_object_image_filled_add(evas);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
// Image
Evas_Object *img;
- char img_path[PATH_MAX] = { 0, };
+ char img_path[PATH_MAX] = {0,};
app_get_resource("tizen_logo.png", img_path, PATH_MAX);
Evas* canvas = evas_object_evas_get(ad->conform);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
<pre class="prettyprint">static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
{
state: "default" 0.0;
align: 0.0 0.0;
- rel1 { relative: 0.0 1.0; to: middle_padding; }
- rel2 { relative: 0.0 1.0; to: middle_padding; }
- text { font: "Tizen:style=regular"; size: 25; min: 1 1; }
+ rel1 {relative: 0.0 1.0; to: middle_padding;}
+ rel2 {relative: 0.0 1.0; to: middle_padding;}
+ text {font: "Tizen:style=regular"; size: 25; min: 1 1;}
// Alpha value set as 255
color: 0 0 0 255;
visible: 0;
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Create window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
{
state: "default" 0.0;
align: 0.0 0.0;
- rel1 { relative: 0.0 0.0; }
- rel2 { relative: 0.5 0.2; }
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 0.5 0.2;}
color: 255 0 0 128;
}
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
<pre class="prettyprint">static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/social/account_w.htm">Account Guide</a></li>
<li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account API</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>AccountManager Sample Overview</h1>
- <p>The AccountManager sample application demonstrates how you can browse, add, edit, and delete accounts stored on the device using the Account API.</p>
+ <p>The AccountManager sample application demonstrates how you can browse, add, edit, and delete accounts stored on the device.</p>
<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
- <p>The application contains 3 pages. The first one is the accounts list page. The following figure illustrates this page.</p>
- <p class="figure">Figure: Account list</p>
- <p align="center"><img alt="Account list" src="../images/accountmanager_list_mw.png" /></p>
-
- <p>After selecting the account, either one of the following pages is displayed, depending on where the application was launched.</p>
- <p class="figure">Figure: Account editing and information</p>
+ <p>The following figure illustrates the main screens of the AccountManager.</p>
+ <p class="figure">Figure: AccountManager screens</p>
+ <p align="center"><img alt="Account list" src="../images/accountmanager_list_mw.png" /> <img alt="Add account" src="../images/accountmanager_add_mw.png" /></p>
<p align="center"><img alt="Edit account" src="../images/accountmanager_edit_mw.png" /> <img alt="Account info" src="../images/accountmanager_info_mw.png" /></p>
-
- <p>If there is no account added yet, the application starts with the <strong>Add account</strong> screen.</p>
- <p class="figure">Figure: Add account</p>
- <p align="center"><img alt="Add account" src="../images/accountmanager_add_mw.png" /></p>
- <p>The application uses a simple MVC (Model View Controller) architecture.</p>
-<p>The constructors are:</p>
-<ul>
-<li>Controller constructor: Main application driver, communicates between Model and View.</li>
-<li>View constructor: Prepares and shows the application screens.</li>
-<li>Model constructor: Responsible for communication with the Tizen API.</li>
-</ul>
-<p>The TAU Framework is used in this sample application. TAU provides a CSS theme for common elements and manages views.</p>
-
+<p>The application opens with account list page, which lists the existing accounts (or with the account addition page, if no accounts exist).</p>
+<p>After you select the account, the account edit or info page opens, depending on from where the application was launched.</p>
<h2>Prerequisites</h2>
</ul>
<h2>Source Files</h2>
+
+ <p>The application uses a simple MVC (Model View Controller) architecture. The constructors are:</p>
+<ul>
+<li>Controller constructor: Main application driver, communicates between Model and View.</li>
+<li>View constructor: Prepares and shows the application screens.</li>
+<li>Model constructor: Responsible for communication with the Tizen API.</li>
+</ul>
+
+
<p>You can create and view the sample application project including the source files in the IDE.</p>
+
<table border="1">
<tbody>
<tr>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
- <td>This directory contains the external libraries (TAU library).</td>
+ <td>This directory contains the external libraries (TAU library).
+ <p>The TAU Framework is used in this sample application. TAU provides a CSS theme for common elements and manages views.</p></td>
</tr>
</tbody>
</table>
<h3>Defining the Application Layout</h3>
-<p>This section explains the layout of the application screens. The screens are defined in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+<p>The application screens are defined in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
<ul>
<li>
-<p>To add the add a new account view:</p>
+<p>The account addition page has a header, labels and input fields in the content area, and a button in the footer:</p>
<pre class="prettyprint">
<section class="ui-page" id="add-account-view">
<div class="ui-header">
</pre>
</li>
<li>
-<p>To add the edit account view:</p>
+<p>The account edit page has a header, label and input field in the content area, and 2 buttons in the footer:</p>
<pre class="prettyprint">
<section class="ui-views ui-page" id="edit-account-view">
<div class="ui-header">
</pre>
</li>
<li>
-<p>To add the edit account information view:</p>
+<p>The account info page has a header, text in the content area, and a button in the footer:</p>
<pre class="prettyprint">
<section class="ui-views ui-page" id="info-account-view">
<div class="ui-header">
</li>
</ul>
-<h3>Application Startup</h3>
+<h3>Starting the Application</h3>
-<p>At startup, the application shows a screen with an accounts list or an account edit screen. It depends where application is started from and if any account is already added to the device.</p>
+<p>At startup, the application shows a screen with the account list or an account addition screen. The start screen depends on whether any account is already added to the device.</p>
-<p>To get information where the application was started from, use the following method:</p>
+<p>To get information on where the application is started from, use the following method:</p>
<pre class="prettyprint">
/* js/main.js */
-
getAppcontrolOperation: function m_getAppcontrolOperation(onError)
{
var appControl = null;
try
{
- appControl = tizen.application.getCurrentApplication()
- .getRequestedAppControl();
+ appControl = tizen.application.getCurrentApplication().getRequestedAppControl();
- return appControl.appControl.operation;
+ return appControl.appControl.operation;
}
catch (error)
{
<p>To show the desired screen:</p>
<pre class="prettyprint">
/* js/main.js */
-
switch (appControlOperation)
{
/* Application opened from account settings by add new account */
}, this.v.showError);
break;
/* Application opened from home menu */
- default :
- ...
+ default:
+ /* Take action */
}
</pre>
<p>To manage accounts:</p>
<ul>
-<li>Add an account.
+<li>Add an account:
<ol>
<li>
<p>To add a new account, call the <span style="font-family: Courier New,Courier,monospace">tizen.account.add()</span> method with the provided Tizen account object:</p>
<li>
<p>To create an account object, call the <span style="font-family: Courier New,Courier,monospace">tizen.Account()</span> constructor:</p>
<pre class="prettyprint">
-// js/main.js
-
+/* js/main.js */
var account = new tizen.Account(this.getAccountProvider(onError),
{userName: userName})
</pre>
-</li>
-<li>
+
<p>The first parameter is the <span style="font-family: Courier New,Courier,monospace">AccountProvider</span> object returned from the <span style="font-family: Courier New,Courier,monospace">this.getAccountProvider()</span> method which wraps the call to the following function. The second parameter is the data to be assigned to the account.</p>
<pre class="prettyprint">
tizen.account.getProvider(appId);
</pre>
</li>
-<li>
-<p>The following example shows the full implementation of adding a new account and assigning additional data.</p>
+</ol>
+
+<p>The following example shows the full implementation of adding a new account and assigning additional data:</p>
<pre class="prettyprint">
/* js/main.js */
-
addAccount: function m_addAccount(userName, data, onError)
- {
+{
var account = new tizen.Account(this.getAccountProvider(onError),
{userName: userName}),
key = '';
}
}
</pre>
+
</li>
-</ol>
-</li>
-<li>Retrieve accounts.
+<li>Retrieve accounts:
<ol>
-<li>To retrieve all accounts assigned to this application, call the <span style="font-family: Courier New,Courier,monospace">tizen.account.getAccounts()</span> method. This function takes 3 parameters: 2 callbacks, <span style="font-family: Courier New,Courier,monospace">onSuccess</span> and <span style="font-family: Courier New,Courier,monospace">onError</span>, and the <span style="font-family: Courier New,Courier,monospace">applicationId</span>.
+<li>To retrieve all accounts assigned to this application, call the <span style="font-family: Courier New,Courier,monospace">tizen.account.getAccounts()</span> method. This function takes 3 parameters: 2 callbacks, <span style="font-family: Courier New,Courier,monospace">onSuccess</span> and <span style="font-family: Courier New,Courier,monospace">onError</span>, and the application ID.
<pre class="prettyprint">
/* js/main.js */
-
getCurrentAccount: function m_getCurrentAccount(onSuccess, onError)
{
try
<p>Use the <span style="font-family: Courier New,Courier,monospace">getApplicationId()</span> function to get the current application ID:</p>
<pre class="prettyprint">
/* js/main.js */
-
getApplicationId: function m_getApplicationId(onError)
{
var context = null;
</li>
</ol>
</li>
-<li>Retrieve account information.
-<p>To retrieve data assigned to an account, read an array of objects provided in the <span style="font-family: Courier New,Courier,monospace">data</span> property of the account object:</p>
+<li>Retrieve account information:
+<p>To retrieve data assigned to an account, read an array of objects provided in the <span style="font-family: Courier New,Courier,monospace">data</span> property of the account object.</p>
<pre class="prettyprint">
/* js/main.js */
-
showInfoView: function v_showAccountView(account)
{
var extData = account.data,
}
</pre>
</li>
-<li>Update an existing account.
+<li>Update an existing account:
<p>Updating an existing account is similar to adding properties while creating a new account, with a difference that an existing account has to be provided.</p>
<p>New custom data is set for the first found account with the <span style="font-family: Courier New,Courier,monospace">account.setExtendedData()</span> method with a key and value pair as a parameter. There is no limit for the number of extended data properties.</p>
<pre class="prettyprint">
/* js/main.js */
-
updateAccountData: function m_editAccount(data, onError)
{
this.getCurrentAccount(function onSuccess(accounts)
}
</pre>
</li>
-<li>Remove account.
-<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace">tizen.account.remove()</span> method with the specified account ID:</p>
+<li>Remove an account:
+<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace">tizen.account.remove()</span> method with the specified account ID.</p>
<pre class="prettyprint">
/* js/main.js */
-
removeAccount: function m_removeAccount(accountId, onError)
{
try
{
tizen.account.remove(accountId);
- } catch (error)
+ }
+ catch (error)
{
onError(error);
}
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm">Application Guide</a></li>
- <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
</ul>
</div></div>
</div>
<tizen:operation name="http://tizen.org/appcontrol/operation/appcall"/>
</tizen:app-control> </pre>
-<p>In the AppCaller application, the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">ApplicationControl</a> interface (consisting of an operation, URI, MIME type, and data) describes an action to be performed by the Callee application. When the system gets the application control request, it finds the corresponding application to perform the requested application control and launches the selected application.</p>
+<p>In the AppCaller application, the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface (consisting of an operation, URI, MIME type, and data) describes an action to be performed by the Callee application. When the system gets the application control request, it finds the corresponding application to perform the requested application control and launches the selected application.</p>
<pre class="prettyprint">
AppControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/appcall',
null, null, null);
</pre>
<p>In the AppCallee application, the <span style="font-family: Courier New,Courier,monospace">replyAppCaller()</span> function replies back to the AppCaller with the data on the selected emoji:</p>
<ul><li>The application control request passed to the AppCallee can be accessed by the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> function. The passed application control contains the reason the application was launched and information about what the application is doing.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> interface defines the key-value pair used to pass data between applications, and it is sent to the AppCaller through the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> function of the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">RequestedApplicationControl</a> interface.</li></ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> interface defines the key-value pair used to pass data between applications, and it is sent to the AppCaller through the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> function of the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">RequestedApplicationControl</a> interface.</li></ul>
<pre class="prettyprint">
function replyAppCaller(text)
{
if (!powered)
{
/* Notify that the connection is lost */
- }
- }
+ }
+ }
});
callback();
ClientModel.prototype =
{
-
- searchServer: function ClientModel_searchServer() { (...) },
- stopServerSearching: function ClientModel_stopServerSearching(callback{ (...) },
- startBonding: function ClientModel_startBonding(address, callback) { (...) },
- destroyBonding: function ClientModel_destroyBonding(device, restartCallback) { (...) },
+ searchServer: function ClientModel_searchServer() {},
+ stopServerSearching: function ClientModel_stopServerSearching(callback) {},
+ startBonding: function ClientModel_startBonding(address, callback) {},
+ destroyBonding: function ClientModel_destroyBonding(device, restartCallback) {},
connectToService: function ClientModel_connectToService(device, serviceUUID,
successCallback, errorCallback) {},
- sendMessage: function ClientModel_sendMessage(name, socket, message, callback) { (...) }
+ sendMessage: function ClientModel_sendMessage(name, socket, message, callback) {}
};
}());
</pre>
<pre class="prettyprint">
/* js/models/radio.js */
-var scanCallback = {
+var scanCallback =
+{
onfrequencyfound: function onFrequencyFound(frequency)
{
/* Found a frequency */
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest Level 1 Guide</a></li>
- <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API</a></li>
+ <li><a href="../../../org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest Level 2 Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API</a></li>
</ul>
</div></div>
</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#location">Geolocation API</a></li>
+ <li><a href="../../../org.tizen.guides/html/web/w3c/location/geolocation_w.htm">Geolocation API Specification Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Geolocation API Specification</a></li>
<li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">SystemInfo API</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>PathTracker Sample Overview</h1>
- <p>The PathTracker sample application demonstrates how to use the W3C Geolocation API to create a Web application that gives you the direction to your destination. In the destination screen you can enter coordinates of the destination point, and the tracker screen navigates you to the destination point. It is possible to define the coordinates of the destination point using a manual selector or the Google Maps service.</p>
+ <p>The PathTracker sample application demonstrates how to use the Geolocation API Specification to create a Web application that gives you the direction to your destination.</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 shows an example view of the destination screen and the tracker screen when the animated arrow directs you to the destination.</p>
+ <p>The following figure illustrates the main screens of the PathTracker.</p>
<p class="figure">Figure: PathTracker screens</p>
<p align="center"><img alt="PathTracker screens" src="../images/pathtracker_set_mw.png" /></p>
- <p align="center"><img alt="PathTracker screens" src="../images/pathtracker_set2_mw.png" /></p>
-
-
+
+ <p>The application opens with the splash screen, which is displayed while the GPS data for the current location is retrieved.</p>
+ <p>When the current location is available, the destination screen opens:</p>
+ <ol><li>Enter the coordinates of your destination point using a manual selector or the Google Maps service. To change the coordinate input mode, click the button in the header:
+ <ul>
+<li>Click <img src="../images/pathtracker_hand_mw.png" alt="Hand icon" /> to select the manual mode.</li>
+<li>Click <img src="../images/pathtracker_point_mw.png" alt="Point icon" /> to select the Google Maps mode.</li>
+</ul>
+<p>When you have set a destination point, the <strong>START</strong> button activates.</p></li>
+<li>To start the path tracking, click <strong>START</strong>.
+<p>The tracker screen navigates you to the destination point using an animated arrow to direct you.</p> </li></ol>
+
<h2>Prerequisites</h2>
<ul>
<td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
</tr>
<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
<td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
<td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
</tr>
<td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
<td>This directory contains the application code.</td>
</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
- <td>This directory contains the external libraries (TAU library).</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
- <td>This file contains the CSS styling for the application UI.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">images</span></td>
- <td>This directory contains the images used to create the user interface.</td>
- </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">js/core</span></td>
<td>This directory contains the application framework.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">js/models</span></td>
- <td>This directory contains files for implementing the application models.</td>
+ <td>This directory contains the files for implementing the application models.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">js/views</span></td>
- <td>This directory contains files for implementing the application views.</td>
+ <td>This directory contains the files for implementing the application views.</td>
</tr>
-
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
</tbody>
</table>
<h2>Implementation</h2>
- <h3>Application Layout</h3>
+ <h3>Defining the Application Layout</h3>
-<p>The PathTracker sample application defines the destination screen that allows the user to input coordinates of the destination point and the tracker screen that navigates the user to the destination point. The user can define the coordinates of the destination point using a manual selector or using the Google Maps service. The mode of defining the destination point can by changed at any time.</p>
+<p>The PathTracker sample application defines the destination screen that allows the user to input coordinates of the destination point and the tracker screen that navigates the user to the destination point:</p>
-<h4>Defining the Destination Screen</h4>
+<ul><li>Destination screen
-<p>The following code snippet shows the arrangement of the main containers of the destination screen.</p>
+<p>The following code snippet shows the arrangement of the main containers of the destination screen:</p>
<pre class="prettyprint">
<!--index.html-->
<div data-role="page" id="destination">
<p>To manage the containers:</p>
<ul>
<li>Header
-<p>The header element contains a title of the page and a button that allows user to choose the mode of defining the destination point. The appearance of this button informs the user about the mode that is selected after click action on it.</p>
-<ul>
-<li><img src="../images/pathtracker_hand_mw.png" alt="Hand icon" /> The hand icon indicates that the manual mode is selected.</li>
-<li><img src="../images/pathtracker_point_mw.png" alt="Point icon" /> The point icon indicates that the Google Maps mode is selected.</li>
-</ul>
-<p>The following code snippet shows the header element in detail.</p>
+<p>The header element contains a title of the page and a button that allows user to change the destination input mode:</p>
<pre class="prettyprint">
<!--index.html-->
<div data-role="header" data-position="fixed">
</pre>
</li>
<li>Content
-<p>Depending on the mode of defining the destination point, the content element displays the manual selector or the map provided by Google Maps service. In both cases, the user can use it to define the destination point. Additionally, when the device is waiting for GPS or network data, the content element can display the splash screen with an appropriate message.</p>
+<p>Depending on the destination input mode, the content element displays the manual selector or the map provided by Google Maps service. Alternatively, when the device is waiting for GPS or network data, the content element can display a splash screen with an appropriate message.</p>
<p>To display the map, the application uses a <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">map</span> ID. This element is used as a container for the map provided by the Google Maps service. The map mode allows the user to define the coordinates of the destination point using touch gestures on the map.</p>
-
-<p>The following code snippet illustrates the elements of the content element that are used to show the map in detail.</p>
<pre class="prettyprint">
<!--index.html-->
<div id="map"></div>
</pre>
-<p>While the <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">map</span> ID is hidden, the content element displays the <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">content-data</span> class. This element is divided into 2 parts (elements with the <span style="font-family: Courier New,Courier,monospace">content-data-frame</span> class). The first one displays the start coordinates and does not require any user action.</p>
-
-<p>The following example shows the element that displays the start coordinates.</p>
+<p>To display the manual selector, the application uses a <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">content-data</span> class. This element is divided into 2 parts (elements with the <span style="font-family: Courier New,Courier,monospace">content-data-frame</span> class):</p>
+<ul><li>The first (upper) part displays the start coordinates and requires no user action:
<pre class="prettyprint">
<!--index.html-->
<div class="content-data">
</div>
<div class="content-data-group start">
<div class="content-data-label">Longitude</div>
- <div class="content-data-value" id="start-longitude-value">checking ...>/div<
+ <div class="content-data-value" id="start-longitude-value">checking ...</div>
</div>
</div>
</div>
-</pre>
-
-<p>The manual selector consists of 2 groups of digits that represent latitude and longitude coordinate values of the destination point. The elements that display these digits are selectable. It means that user can change the value of the digit only if it is currently selected. To change the value of the selected digit, user has to turn the knob (the <span style="font-family: Courier New,Courier,monospace"><div></span> element with <span style="font-family: Courier New,Courier,monospace">circle-selector-frame</span> class) placed below the digits.</p>
-
-<p>The following example shows the element that displays the destination coordinates</p>
+</pre></li>
+<li>The second (lower) part consists of 2 groups of digits that represent the latitude and longitude coordinate values of the destination point. The elements that display these digits are selectable, and the user can change the value of the digit only if it is currently selected. To change the value of the selected digit, the user turns the knob (the <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">circle-selector-frame</span> class) placed below the digits.
<pre class="prettyprint">
<!--index.html-->
<div class="content-data">
</div>
</div>
</div>
-</pre>
+</pre></li></ul>
-<p>To show the splash screen, the application uses a <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">splash</span> ID, which is a container for a message displayed in the <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">splash-action</span> ID.</p>
-
-<p>The following code snippet shows the elements of the content element.</p>
+<p>To show the splash screen, the application uses a <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">splash</span> ID, which is a container for a message displayed in the <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">splash-action</span> ID:</p>
<pre class="prettyprint">
<!--index.html-->
<div id="splash" class="display-flex">
</pre>
</li>
<li>Footer
-<p>The main screen footer contains the <strong>START</strong> button (the <span style="font-family: Courier New,Courier,monospace"><a></span> element with the <span style="font-family: Courier New,Courier,monospace">destination-start-btn</span> ID). This button allows user to switch the application into the tracker screen.</p>
+<p>The footer contains the <strong>START</strong> button (the <span style="font-family: Courier New,Courier,monospace"><a></span> element with the <span style="font-family: Courier New,Courier,monospace">destination-start-btn</span> ID), which allows the user to switch the application to the tracker screen:</p>
-<p>The following code snippet shows the footer element.</p>
<pre class="prettyprint">
<!--index.html-->
<div data-role="footer" data-position="fixed">
<a data-role="button" id="destination-start-btn" disabled="disabled">START</a>
</div>
</pre>
-<p>The following figure shows the destination screen in different modes. The <strong>START</strong> button is enabled only when the coordinates of the destination point are defined.</p>
- <p align="center"><img alt="PathTracker start" src="../images/pathtracker_start_mw.png" /></p>
</li>
</ul>
+</li>
+<li>Tracker screen
- <h4>Defining the Tracker Screen</h4>
-
-<p>The following code snippet shows the arrangement of the main containers of the tracker screen.</p>
+<p>The following code snippet shows the arrangement of the main containers of the tracker screen:</p>
<pre class="prettyprint">
<!--index.html-->
<div data-role="page" id="tracker">
</div>
</pre>
-<p>To manage the elements:</p>
+<p>To manage the containers:</p>
<ul>
<li>Header
-<p>The header element contains only a title of the page.</p>
-
-<p>The following code snippet shows the header element.</p>
+<p>The header element contains only the title of the page:</p>
<pre class="prettyprint">
<!--index.html-->
<div data-role="header" data-position="fixed">
</pre>
</li>
<li>Content
-<p>The content element display consists of 2 elements:</p>
+<p>The content element has 2 parts:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">arrow</span> ID. This element is responsible for displaying animated image of the arrow that allows app to indicate the absolute direction to the destination point.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">distance</span> ID, which is used to show the absolute distance to the destination point.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">arrow</span> ID is responsible for displaying an animated image of the arrow that indicates the absolute direction to the destination point.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace"><div></span> element with the <span style="font-family: Courier New,Courier,monospace">distance</span> ID is used to show the absolute distance to the destination point.</li>
</ul>
-
-<p>To calculate the angle of the animated arrow and the value of the displayed distance, the application uses the values of the start and destination coordinates and supports with the methods from the <span style="font-family: Courier New,Courier,monospace">js/helpers/calculations.js</span> module.</p>
-
-<p>The following code snippet shows the elements of the content element on the tracker screen.</p>
<pre class="prettyprint">
<!--index.html-->
<div id="arrow"></div>
<span id="distance-unit"></span>
</div>
</pre>
-<p>The following figure shows an example view of the tracker screen.</p>
- <p align="center"><img alt="PathTracker tracker" src="../images/pathtracker_tracker_mw.png" /></p>
+
+<p>To calculate the angle of the animated arrow and the value of the displayed distance, the application uses the values of the start and destination coordinates and the methods from the <span style="font-family: Courier New,Courier,monospace">js/helpers/calculations.js</span> module.</p>
</li>
-</ul>
+</ul></li></ul>
+
<h3>Accessing Geolocation Data</h3>
-<p>The PathTracker sample application is based on the W3C Geolocation API that provides scripted access to geographical location information associated with the hosting device. To use this API, the application defines the <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module containing the set of methods that allow obtaining and operating on location data. The <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module is initialized after application startup.</p>
+<p>The PathTracker sample application is based on the Geolocation API Specification that provides scripted access to geographical location information associated with the hosting device. To use this API, the application defines the <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module containing a set of methods that allow obtaining and operating on the location data. The <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module is initialized after application startup.</p>
+
-<h4>Using the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> Method</h4>
+<h4>Tracking the Position Changes</h4>
-<p >When the <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module is initialized, the <span style="font-family: Courier New,Courier,monospace">init()</span> method is called. The following code snippet shows the initialization process of this module.</p>
+<p>During the <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module initialization, the <span style="font-family: Courier New,Courier,monospace">init()</span> method is called:</p>
+
+<ol>
+<li>The <span style="font-family: Courier New,Courier,monospace">init()</span> method checks whether the <span style="font-family: Courier New,Courier,monospace">navigator.geolocation</span> object exists. If it does, it is assigned to the <span style="font-family: Courier New,Courier,monospace">geo</span> global variable. The <span style="font-family: Courier New,Courier,monospace">geo</span> object is used later for all requests to the Geolocation API.
<pre class="prettyprint">
/* js/models/geo.js */
var geo = null, geoWatchId = 0;
-
-function onWatchPositionSuccess(position)
+function init()
{
- var coords = position.coords;
-
- e.fire('change.position.success',
+ if (navigator.geolocation)
{
- position:
- {
- latitude: coords.latitude,
- longitude: coords.longitude
- }
- });
-}
-
-function onWatchPositionError(error)
-{
- console.error('GEO: onWatchPositionError()', error.message);
+ geo = navigator.geolocation;
+ startGeoWatching();
+ }
}
-
+</pre></li>
+<li>The application calls the <span style="font-family: Courier New,Courier,monospace">startGeoWatching()</span> method.
+<p>The <span style="font-family: Courier New,Courier,monospace">startGeoWatching()</span> method uses the <span style="font-family: Courier New,Courier,monospace">geo</span> object to call the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> method from the Geolocation API, defining 2 callbacks as parameters.</p>
+<pre class="prettyprint">
+/* js/models/geo.js */
function startGeoWatching()
{
try
onWatchPositionError(error);
}
}
+</pre></li>
+<li>Every time the coordinates of the current position of the device change, the first callback (<span style="font-family: Courier New,Courier,monospace">onWatchPositionSuccess()</span>) is invoked.
+<p>The <span style="font-family: Courier New,Courier,monospace">onWatchPositionSuccess()</span> method takes the <span style="font-family: Courier New,Courier,monospace">Position</span> object as a parameter, extracts coordinate data from the given parameter, and fires the <span style="font-family: Courier New,Courier,monospace">change.position.success</span> event passing the extracted data to this event.</p>
+<pre class="prettyprint">
+/* js/models/geo.js */
+var geo = null, geoWatchId = 0;
-function init()
+function onWatchPositionSuccess(position)
{
- if (navigator.geolocation)
+ var coords = position.coords;
+
+ e.fire('change.position.success',
{
- geo = navigator.geolocation;
- startGeoWatching();
- }
+ position:
+ {
+ latitude: coords.latitude,
+ longitude: coords.longitude
+ }
+ });
}
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">init()</span> method checks whether the <span style="font-family: Courier New,Courier,monospace">navigator.geolocation</span> object exists. If it does, it is assigned to the <span style="font-family: Courier New,Courier,monospace">geo</span> global variable. The <span style="font-family: Courier New,Courier,monospace">geo</span> object is used later for all requests to the W3C Geolocation API. At the next step, the application calls the <span style="font-family: Courier New,Courier,monospace">startGeoWatching()</span> method.</p>
+function onWatchPositionError(error)
+{
+ console.error('GEO: onWatchPositionError()', error.message);
+}
+</pre></li>
+<li>The application listens to the <span style="font-family: Courier New,Courier,monospace">change.position.success</span> event all the time while working. When the event occurs, the application performs appropriate actions on both the destination and tracker screen.
+<p>When the destination screen is active, the event is responsible for updating the displayed start coordinates (in case of the manual mode) or updating the yellow start pointer position (in case of the map mode). When the tracker screen is active, the event allows the application to decide whether the angle of the animated arrow and the value of the distance to the destination point must be updated.</p></li></ol>
-<p>The <span style="font-family: Courier New,Courier,monospace">startGeoWatching()</span> method uses the <span style="font-family: Courier New,Courier,monospace">geo</span> object to call the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> from the W3C Geolocation API. It takes 2 methods as parameters. From now on, the application calls the <span style="font-family: Courier New,Courier,monospace">onWatchPositionSuccess()</span> method every time when the coordinates of the current position of the device are being changed. The <span style="font-family: Courier New,Courier,monospace">onWatchPositionSuccess()</span> method takes the <span style="font-family: Courier New,Courier,monospace">Position</span> object as parameter, extracts coordinates data form given parameter, and fires the <span style="font-family: Courier New,Courier,monospace">change.position.success</span> event passing extracted data to this event.</p>
-<p>The application listens to the <span style="font-family: Courier New,Courier,monospace">change.position.success</span> event all the time while working. The application performs appropriate actions on both destination and tracker screen when this event occurs. When the destination screen is active, this event is responsible for updating the displayed start coordinates (in case of the manual mode) or updating the yellow start pointer position (in case of the map mode). When the tracker screen is active, the <span style="font-family: Courier New,Courier,monospace">change.position.success</span> event allows the application to decide whether the angle of the animated arrow and the value of the distance to the destination point must be updated.</p>
+<h4>Getting the Current Position</h4>
-<h4>Using the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> Method</h4>
+<p>To get the current position:</p>
-<p>Immediately after the application startup the destination screen displays splash screen with a "Waiting for GPS data" message by default. At the same time the application starts to monitor the network state. This is because the application needs time to check whether the GPS signal and the data transfer for device are available. The checking process starts when the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method from <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module is called.</p>
+<ol>
+<li>Immediately after the application startup, the destination screen displays a splash screen with the <strong>Waiting for GPS data</strong> message by default. At the same time, the application starts to monitor the network state. This is because the application needs time to check whether the GPS signal and the data transfer for the device are available. The checking process starts when the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module is called.
-<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">init()</span> method of the <span style="font-family: Courier New,Courier,monospace">js/views/destination.js</span> module.</p>
<pre class="prettyprint">
/* js/views/destination.js */
var geo = req.models.geo, /* Geo module object */
setSplashScreenText(SPLASH_GPS_DATA);
geo.getCurrentPosition();
}
-</pre>
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module calls the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method from the Geolocation API. This method allows the application to obtain the current coordinates of the device location.
+
+<p>The <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method takes 2 callbacks as parameters, called in case of success or error:</p>
+<ul><li>The <span style="font-family: Courier New,Courier,monospace">onGetCurrentPositionSuccess()</span> success callback takes the <span style="font-family: Courier New,Courier,monospace">Position</span> object as parameter, extracts coordinates data from the given parameter, and fires the <span style="font-family: Courier New,Courier,monospace">start.position.success</span> event passing the extracted data to the event.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onGetCurrentPositionError()</span> error callback fires the <span style="font-family: Courier New,Courier,monospace">start.position.error</span> event passing the obtained error object to the event.</li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/models/geo.js</span> module calls the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method from the W3C Geolocation API. This method allows the application to obtain current coordinates of the device location.</p>
-<p>The following code snippet shows what happens when the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method is called.</p>
<pre class="prettyprint">
/* js/models/geo.js */
function onGetCurrentPositionSuccess(position)
{
getCurrentPosition: getCurrentPosition
};
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method takes 2 methods as parameters. These are the callbacks that are called in case of success or error. The <span style="font-family: Courier New,Courier,monospace">onGetCurrentPositionSuccess()</span> method takes the <span style="font-family: Courier New,Courier,monospace">Position</span> object as parameter, extracts coordinates data form a given parameter and fires the <span style="font-family: Courier New,Courier,monospace">start.position.success</span> event passing extracted data to this event. In case of error, the application calls the <span style="font-family: Courier New,Courier,monospace">onGetCurrentPositionError()</span> method that fires the <span style="font-family: Courier New,Courier,monospace">start.position.error</span> event passing obtained error object to this event.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">js/views/destination.js</span> module waits for the <span style="font-family: Courier New,Courier,monospace">start.position.success</span> event to call the <span style="font-family: Courier New,Courier,monospace">onStartPositionSuccess()</span> method and finish the initialization of the destination screen.</p>
+</pre></li>
-<p>The following snippet shows the <span style="font-family: Courier New,Courier,monospace">onStartPositionSuccess()</span> in details.</p>
+<li>The <span style="font-family: Courier New,Courier,monospace">js/views/destination.js</span> module waits for the <span style="font-family: Courier New,Courier,monospace">start.position.success</span> event to call the <span style="font-family: Courier New,Courier,monospace">onStartPositionSuccess()</span> method and finish the initialization of the destination screen:
<pre class="prettyprint">
/* js/views/destination.js */
function onStartPositionSuccess(ev)
systeminfo.checkNetworkType();
}
}
-</pre>
+</pre></li>
+
+<li>If the destination screen is active, the application modifies the message displayed on the splash screen to <strong>Waiting for network data</strong> and calls the <span style="font-family: Courier New,Courier,monospace">checkNetworkType()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/models/systeminfo.js</span> module.
-<p>On condition that the destination screen is active, the application modifies the message displayed on splash screen to "Waiting for network data" and calls the <span style="font-family: Courier New,Courier,monospace">checkNetworkType()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/models/systeminfo.js</span> module.</p>
+<p>The application uses the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method from the System Information API to obtain information about the type of the available network. As a result of the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method, 2 types of events can be fired:</p>
+<ul>
+<li>When the <span style="font-family: Courier New,Courier,monospace">onGetPropertyValueSuccess()</span> success callback is called, the application saves the obtained network type and fires the <span style="font-family: Courier New,Courier,monospace">network.checked</span> event.</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace">onGetPropertyValueError()</span> error callback is called, the application fires the <span style="font-family: Courier New,Courier,monospace">network.not.checked</span> event.</li>
+</ul>
-<p>The following code snippet shows what happens when the <span style="font-family: Courier New,Courier,monospace">checkNetworkType()</span> method is called.</p>
<pre class="prettyprint">
-// js/views/destination.js
+/* js/views/destination.js */
var networkType = 'NONE';
function setNetworkType(network)
{
checkNetworkType: checkNetworkType,
};
-</pre>
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">js/views.destination.js</span> module expects both the <span style="font-family: Courier New,Courier,monospace">network.checked</span> and <span style="font-family: Courier New,Courier,monospace">network.not.checked</span> events.
-<p>The application uses the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method from the Tizen System Information API to catch the moment that the network is being already checked and obtain information about the type of the available network. As a result of the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method, 2 types of events can be fired. When the <span style="font-family: Courier New,Courier,monospace">onGetPropertyValueSuccess()</span> method is called, the application saves the obtained network type and fires the <span style="font-family: Courier New,Courier,monospace">network.checked</span> event. When the <span style="font-family: Courier New,Courier,monospace">onGetPropertyValueError()</span> method is called, the application fires the <span style="font-family: Courier New,Courier,monospace">network.not.checked</span> event. Both of them are expected by the <span style="font-family: Courier New,Courier,monospace">js/views.destination.js</span> module.</p>
+<p>No matter which event occurs, the application calls the <span style="font-family: Courier New,Courier,monospace">startUI()</span> method. The difference is that, in case of the <span style="font-family: Courier New,Courier,monospace">network.checked</span> event, the application additionally calls the <span style="font-family: Courier New,Courier,monospace">isGoogleService()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/models/systeminfo.js</span> module to check the information about the saved network type and about the <span style="font-family: Courier New,Courier,monospace">window.google</span> object availability. When the <span style="font-family: Courier New,Courier,monospace">mapsEnabled</span> attribute of the object passed as a parameter to the <span style="font-family: Courier New,Courier,monospace">startUI()</span> method is <span style="font-family: Courier New,Courier,monospace">true</span>, the application displays the map selector on the destination screen. Otherwise, it displays the manual selector.</p>
-<p>The following code snippet shows what happens when described above events occur.</p>
<pre class="prettyprint">
-// js/views/destination.js
+/* js/views/destination.js */
function startUI(params)
{
if (params && params.mapsEnabled)
function onNetworkChecked()
{
- startUI(
- {
- mapsEnabled: systeminfo.isGoogleService()
- });
+ startUI({mapsEnabled: systeminfo.isGoogleService()});
}
function onNetworkNotChecked()
{
- startUI(
- {
- mapsEnabled: false
- });
+ startUI({mapsEnabled: false});
}
e.listeners(
'models.systeminfo.network.not.checked': onNetworkNotChecked
});
</pre>
-
-<p>No matter which event occurs, the application finally calls the <span style="font-family: Courier New,Courier,monospace">startUI()</span> method. The difference is that in case of the <span style="font-family: Courier New,Courier,monospace">network.checked</span> event the application additionally calls the <span style="font-family: Courier New,Courier,monospace">isGoogleService()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/models/systeminfo.js</span> module to check the information about the saved network type and about the <span style="font-family: Courier New,Courier,monospace">window.google</span> object availability. When the <span style="font-family: Courier New,Courier,monospace">mapsEnabled</span> attribute of the object passed as a parameter to the <span style="font-family: Courier New,Courier,monospace">startUI()</span> method has the <span style="font-family: Courier New,Courier,monospace">true</span> value, the application displays the map selector on destination screen. Otherwise it displays the manual selector.</p>
-
+</li></ol>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<td><a href="newsfeed_mw.htm">NewsFeed</a></td>
<td>Demonstrates how you can send requests and receive XML format data using:
<ul>
- <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 1</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2</a> API</li>
</ul>
</td>
</tr>
</tr>
<tr>
<td><a href="pathtracker_mw.htm">PathTracker</a></td>
- <td>Demonstrates how you can create a Web application that gives the you the direction to your destination using:
+ <td>Demonstrates how you can create a Web application that gives you the direction to your destination using:
<ul>
<li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Geolocation API</a></li>
<li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">SystemInfo API</a></li>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Ambient Weather Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+ <h1>Ambient Weather Sample Overview</h1>
+
+<p>The Ambient Weather sample application demonstrates how to implement a simple watch with the current weather displayed in the ambient mode.</p>
+
+<p>The following figure illustrates the main screen of the Ambient Weather application and the UI component structure.</p>
+
+<p class="figure">Figure: Ambient Weather screen</p>
+ <p align="center">
+ <img alt="Ambient Weather screen" src="../images/ambientweather_wn1.png" /> <img alt="Ambient Weather screen" src="../images/ambientweather_wn0.png" /> </p>
+<p align="center"><img alt="Ambient Weather component structure" src="../images/ambientweather_wn3.png" />
+</p>
+
+<p>The application shows a digital watch on the screen. When the device goes into the ambient mode, the watch is replaced with current weather information.</p>
+
+<p>The application is multi-threaded. The time-consuming task of requesting the weather data runs in a separate thread to avoid UI lockups. The following figure shows the weather data request diagram.</p>
+
+<p class="figure">Figure: Weather data request diagram</p>
+<p align="center">
+ <img alt="Weather data request diagram" src="../images/ambientweather_wn2.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/network.get</span></li>
+<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/internet</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span></li>
+</ul>
+
+<h2>Implementation</h2>
+
+<h3>Main Module</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function of the sample application starts the application loop with the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> type object is passed to the application loop with the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function. Pay attention to how it differs from the <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> type used in the standard application type. The <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure introduces 3 new pointers to the following callback functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">watch_app_time_tick_cb()</span>: Called every second when the application is in the normal mode, giving the application a chance to refresh the UI.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">watch_app_ambient_tick_cb()</span>: Called every minute when the application is in the ambient mode, giving the application a chance to refresh the UI.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">watch_app_ambient_changed_cb()</span>: Called whenever the application enters the normal or ambient mode.</li>
+</ul>
+
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+ int ret = 0;
+
+ watch_app_lifecycle_callback_s event_callback = {0,};
+
+ event_callback.create = app_create;
+ event_callback.resume = app_resume;
+ event_callback.pause = app_pause;
+ event_callback.terminate = app_terminate;
+ event_callback.time_tick = app_time_tick;
+ event_callback.ambient_tick = app_time_tick;
+ event_callback.ambient_changed = app_ambient_changed;
+
+ ret = watch_app_main(argc, argv, &event_callback, NULL);
+ // Error handling
+
+ return ret;
+}
+
+static void
+app_time_tick(watch_time_h watch_time, void *data)
+{
+ // Variable definitions and error handling
+ __get_date_from_watch_time(watch_time, &year, &month, &day, &day_of_week,
+ &hours, &minutes, &seconds);
+
+ controller_tick(hours, minutes, seconds, year, month, day, day_of_week);
+}
+
+static void
+app_ambient_changed(bool ambient_mode, void *data)
+{
+ controller_set_ambient_mode(ambient_mode);
+}
+
+static void
+__get_date_from_watch_time(const watch_time_h watch_time,
+ int *year, int *month, int *day, int *day_of_week,
+ int *hours, int *minutes, int *seconds)
+{
+ watch_time_get_hour24(watch_time, hours);
+ watch_time_get_minute(watch_time, minutes);
+ watch_time_get_second(watch_time, seconds);
+ watch_time_get_year(watch_time, year);
+ watch_time_get_month(watch_time, month);
+ watch_time_get_day(watch_time, day);
+ watch_time_get_day_of_week(watch_time, day_of_week);
+}
+</pre>
+
+<h3>Controller Module</h3>
+<p>The controller module controls the application execution through the following functions:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">controller_start_application()</span> function is called at the application startup. It sets up the view and initializes the weather poll thread module by passing the <span style="font-family: Courier New,Courier,monospace">__weather_poll_data_ready_cb()</span> callback to the <span style="font-family: Courier New,Courier,monospace">weather_poll_thread_init()</span> function. It also sets the current time on the watch view.
+
+<pre class="prettyprint">
+bool
+controller_start_application(int width, int height,
+ int hour, int min, int sec,
+ int year, int month, int day, int week_day)
+{
+ if (!view_create_gui(width, height))
+ return false;
+
+ if (!weather_poll_thread_init(__weather_poll_data_ready_cb))
+ return false;
+
+ view_set_time(hour, min, sec, year, month, day, week_day);
+
+ return true;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">__weather_poll_data_ready_cb()</span> callback is called in the main thread context whenever the weather polling thread ends its work successfully. This function updates the UI in the ambient mode by displaying the data received from the server:</p>
+
+<pre class="prettyprint">
+static void
+__weather_poll_data_ready_cb(xml_weather_t *weather, const void *icon_data, int icon_data_len)
+{
+ if (weather)
+ {
+ view_set_temperature(weather->temperature.value, weather->temperature.unit);
+ view_set_city(weather->city.name, weather->city.country);
+ view_set_humidity(weather->humidity.value, weather->humidity.unit);
+ view_set_pressure(weather->pressure.value, weather->pressure.unit);
+ view_set_wind(weather->wind.name, weather->wind.speed_value, weather->wind.direction_name);
+ view_set_clouds(weather->clouds.name);
+ view_set_precipitation(weather->precipitation.value);
+ view_set_last_update(asctime(&weather->last_update));
+ }
+
+ if (icon_data && icon_data_len > 0)
+ {
+ view_set_icon(icon_data, icon_data_len);
+ }
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">controller_set_ambient_mode()</span> function is called from the <span style="font-family: Courier New,Courier,monospace">app_ambient_changed()</span> callback, defined in the main module.</p>
+<p>This way, the application can track whether it is in the ambient or normal mode. Stop any power consuming operations in the ambient mode. For example, you can change the display state to one that has most of its pixels dark.</p>
+
+<pre class="prettyprint">
+void
+controller_set_ambient_mode(bool ambient_mode)
+{
+ cdata.ambient_mode = ambient_mode;
+ view_set_ambient(cdata.ambient_mode);
+ if (cdata.ambient_mode)
+ {
+ wifi_monitor_stop_measure();
+ }
+ else
+ {
+ wifi_monitor_start_measure(__wifi_rssi_level_changed_cb);
+ }
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">controller_tick()</span> function is called at 1-second intervals when the application is in the normal mode and at 1-minute intervals when it is in the ambient mode. The function updates the time view display:</p>
+
+<pre class="prettyprint">
+void
+controller_tick(int hour, int min, int sec,
+ int year, int month, int day, int week_day)
+{
+ view_set_time(hour, min, sec, year, month, day, week_day);
+}
+</pre>
+</li>
+</ul>
+
+<h3>Weather Poll Thread Module</h3>
+
+<p>When the weather poll thread module is initialized, it introduces a single <span style="font-family: Courier New,Courier,monospace">ecore_timer</span>, whose callback is launched periodically to execute the server data poll function in a separate thread:</p>
+
+<pre class="prettyprint">
+bool
+weather_poll_thread_init(weather_poll_data_ready_cb cb)
+{
+ // Variable definitions and error handling
+
+ wpt.tim = ecore_timer_add(1.0, __weather_poll_timer_cb, NULL);
+
+ // Error handling
+
+ ecore_timer_freeze(wpt.tim);
+
+ return true;
+}
+
+static Eina_Bool
+__weather_poll_timer_cb(void *data)
+{
+ ecore_timer_interval_set(wpt.tim, WEATHER_POLL_INTERVAL_SEC);
+
+ if (!wpt.thread_h)
+ {
+ wpt.thread_h = ecore_thread_run(__thread_function, __thread_end_cb, __thread_cancelled_cb, NULL);
+
+ // Error handling
+ }
+
+ return EINA_TRUE;
+}
+</pre>
+
+<p>Both the <span style="font-family: Courier New,Courier,monospace">__thread_function()</span> and <span style="font-family: Courier New,Courier,monospace">__weather_data_read_cb()</span> functions are executed in a separate thread. Since the <span style="font-family: Courier New,Courier,monospace">weather_query()</span> function blocks until it is finished, its execution from the main thread would lock up the UI.</p>
+<pre class="prettyprint">
+static void
+__thread_function(void *data, Ecore_Thread *thread)
+{
+ if (!weather_query(__weather_data_read_cb))
+ dlog_print(DLOG_ERROR, LOG_TAG, "Failed to make a query");
+}
+</pre>
+
+<p>Any UI update function calls from the <span style="font-family: Courier New,Courier,monospace">__weather_data_read_cb()</span> callback are prohibited. The callback only stores pointers to received data in a common memory area.</p>
+
+<pre class="prettyprint">
+static void
+__weather_data_read_cb(xml_weather_t *weather, image_buffer_t *image_buffer)
+{
+ wpt.weather = weather;
+ wpt.image_buffer = image_buffer;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">__thread_end_cb()</span> callback is called automatically when the <span style="font-family: Courier New,Courier,monospace">__thread_function()</span> function finishes successfully. The callback is called from the main thread, and this is why it can call a callback from the main controller (updating the UI). The server data pointers, previously stored by the <span style="font-family: Courier New,Courier,monospace">__weather_data_read_cb()</span> function, are used.</p>
+
+<pre class="prettyprint">
+static void
+__thread_end_cb(void *data, Ecore_Thread *thread)
+{
+ char *buffer = NULL;
+ int buffer_size = 0;
+
+ if (wpt.image_buffer)
+ {
+ buffer = wpt.image_buffer->buffer;
+ buffer_size = wpt.image_buffer->size;
+ }
+
+ if (wpt.cb)
+ wpt.cb(wpt.weather, buffer, buffer_size);
+
+ xml_weather_dispose(wpt.weather);
+ weather_free_image_buffer(wpt.image_buffer);
+ wpt.weather = NULL;
+ wpt.image_buffer = NULL;
+ wpt.thread_h = NULL;
+}
+</pre>
+
+<h3>View Module</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">watch_app_get_elm_win()</span> function is used to obtain a special watch type window. This way the application can receive the ambient and normal mode switch events properly.</p>
+
+<pre class="prettyprint">
+bool
+view_create_gui(int width, int height)
+{
+ watch_app_get_elm_win(&vd.win);
+
+ // Error handling
+
+ evas_object_resize(vd.win, width, height);
+
+ vd.digital_clock = digital_clock_create(vd.win, width, height);
+ evas_object_show(vd.digital_clock);
+
+ vd.weather = weather_create(vd.win, width, height);
+
+ // Common code
+}
+</pre>
+
+<p>Each time a time tick occurs, the controller module calls the <span style="font-family: Courier New,Courier,monospace">view_set_time()</span> function. It updates the digital clock available in the normal application mode:</p>
+<pre class="prettyprint">
+void
+view_set_time(int hours, int minutes, int seconds,
+ int year, int month, int day, int week_day)
+{
+ digital_clock_set_time(vd.digital_clock, hours, minutes);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_set_ambient()</span> function is called each time the application mode changes. In the ambient mode, only the weather view is shown, whereas in the normal mode, only the digital clock is visible.</p>
+
+<pre class="prettyprint">
+void
+view_set_ambient(bool on_off)
+{
+ vd.ambient = on_off;
+
+ if (on_off)
+ {
+ evas_object_show(vd.weather);
+ evas_object_hide(vd.digital_clock);
+ }
+ else
+ {
+ evas_object_show(vd.digital_clock);
+ evas_object_hide(vd.weather);
+ }
+}
+</pre>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
- <script type="text/javascript" src="../scripts/snippet.js"></script>
- <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
- <title>The Ambient Weather Sample Overview</title>
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div>
-
-<div id="container"><div id="contents"><div class="content">
- <div id="profile">
- <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
- </div>
-
- <h1>Ambient Weather Sample Overview</h1>
-
-<p>The Ambient Weather sample application demonstrates how to implement a simple watch with current weather display in ambient mode.</p>
-
-<p>The following figure illustrates two screens of the (Circle) Ambient Weather sample application: the normal mode digital watch view and the ambient mode view with weather data.</p>
-
-<p class="figure">Figure 1: Ambient Weather views</p>
- <p align="center">
- <img alt="Ambient Weather views" src="../images/ambientweather_wn0.png" height="240" width="240"/>
- <img alt="Ambient Weather views" src="../images/ambientweather_wn1.png" height="240" width="240"/>
- </p>
-
-<p class="figure">Figure 2: Ambient Weather widgets structure</p>
-<p align="center">
- <img alt="(Circle) Sensors widgets structure" src="../images/ambientweather_wn3.png" height="274" width="284"/>
-</p>
-
-<p>It is worth mentioning that this application is multithreaded. The time consuming task of requesting the weather data has been moved to a separate thread to avoid UI lockups.
-It is demonstarted in Fig. 3.</p>
-
-<p class="figure">Figure 3: Weather data request diagram</p>
-<p align="center">
- <img alt="(Circle) Sensors widgets structure" src="../images/ambientweather_wn2.png" height="438" width="839"/>
-</p>
-
-<h2>Prerequisites</h2>
-<p>To ensure proper application execution, the following privileges must be set:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/network.get</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/keymanager</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/internet</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span></li>
-</ul>
-</p>
-
-<h2>Implementation</h2>
-
-<h3>Main module</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function of the sample application is show below. The application loop
-is started when the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span>
-function is invoked. An object of <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> type can be passed to it.
-Notice how it differs from <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> type used in the standard application type.
-The <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure introduces three new pointers to the following callback functions:
-</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">watch_app_time_tick_cb</span> - called every second when the application is in normal mode, giving the application a chance to refresh the time indicator,</li>
- <li><span style="font-family: Courier New,Courier,monospace">watch_app_ambient_tick_cb</span> - called every minute when the application is in ambient mode, giving the application a chance to refresh the time indicator,</li>
- <li><span style="font-family: Courier New,Courier,monospace">watch_app_ambient_changed_cb</span> - called whenever the application enters normal or ambient mode.</li>
-</ul>
-
-<pre class="prettyprint">
-int main(int argc, char *argv[])
-{
- int ret = 0;
-
- watch_app_lifecycle_callback_s event_callback = {0,};
-
- event_callback.create = app_create;
- event_callback.resume = app_resume;
- event_callback.pause = app_pause;
- event_callback.terminate = app_terminate;
- event_callback.time_tick = app_time_tick;
- event_callback.ambient_tick = app_time_tick;
- event_callback.ambient_changed = app_ambient_changed;
-
- ret = watch_app_main(argc, argv, &event_callback, NULL);
- // Error handling ...
-
- return ret;
-}
-</pre>
-
-<pre class="prettyprint">
-static void app_time_tick(watch_time_h watch_time, void *data)
-{
- // Variables definitions and error handling ...
- __get_date_from_watch_time(watch_time,
- &year, &month, &day, &day_of_week,
- &hours, &minutes, &seconds);
-
- controller_tick(hours, minutes, seconds, year, month, day, day_of_week);
-}
-</pre>
-
-<pre class="prettyprint">
-static void app_ambient_changed(bool ambient_mode, void *data)
-{
- controller_set_ambient_mode(ambient_mode);
-}
-</pre>
-
-<pre class="prettyprint">
-static void __get_date_from_watch_time(const watch_time_h watch_time,
- int *year, int *month, int *day, int *day_of_week,
- int *hours, int *minutes, int *seconds)
-{
- watch_time_get_hour24(watch_time, hours);
- watch_time_get_minute(watch_time, minutes);
- watch_time_get_second(watch_time, seconds);
- watch_time_get_year(watch_time, year);
- watch_time_get_month(watch_time, month);
- watch_time_get_day(watch_time, day);
- watch_time_get_day_of_week(watch_time, day_of_week);
-}
-</pre>
-
-<h3>Main controller module</h3>
-<p>Four important functions of this module are presented below. The <span style="font-family: Courier New,Courier,monospace">controller_start_application()</span>
-function is called at the application's startup. It sets up the view and initiates the
-<span style="font-family: Courier New,Courier,monospace">weather_poll_thread</span>
-module by passing the <span style="font-family: Courier New,Courier,monospace">__weather_poll_data_ready_cb()</span> callback function to it. It also sets the current time on the watch view.</p>
-
-<pre class="prettyprint">
-bool controller_start_application(int width, int height,
- int hour, int min, int sec,
- int year, int month, int day, int week_day)
-{
- if (!view_create_gui(width, height))
- return false;
-
- if (!weather_poll_thread_init(__weather_poll_data_ready_cb))
- return false;
-
- view_set_time(hour, min, sec, year, month, day, week_day);
-
- return true;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">controller_set_ambient_mode()</span> function is called from
-<span style="font-family: Courier New,Courier,monospace">app_ambient_changed()</span>
-callback, defined in the main module. This way, the application can track whether it is in ambient or normal mode.
-It is recommended to stop any power consuming operations in the ambient mode. For example, you can change the display state to one that has most of its pixels dark.</p>
-
-<pre class="prettyprint">
-void controller_set_ambient_mode(bool ambient_mode)
-{
- cdata.ambient_mode = ambient_mode;
- view_set_ambient(cdata.ambient_mode);
- if (cdata.ambient_mode) {
- wifi_monitor_stop_measure();
- } else {
- wifi_monitor_start_measure(__wifi_rssi_level_changed_cb);
- }
-}
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">controller_tick()</span>
-is called with one second interval when the application is in normal mode
-and with one minute interval when it is in ambient mode. It updates the time view display.</p>
-
-<pre class="prettyprint">
-void controller_tick(int hour, int min, int sec,
- int year, int month, int day, int week_day)
-{
- view_set_time(hour, min, sec, year, month, day, week_day);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">__weather_poll_data_ready_cb()</span>
-callback is called in the main thread context whenever the weather polling thread ends its work successfully.
-This function updates the UI in ambient mode by displaying the data received from the server.</p>
-
-<pre class="prettyprint">
-static void __weather_poll_data_ready_cb(xml_weather_t *weather, const void *icon_data, int icon_data_len)
-{
- if (weather) {
- view_set_temperature(weather->temperature.value, weather->temperature.unit);
- view_set_city(weather->city.name, weather->city.country);
- view_set_humidity(weather->humidity.value, weather->humidity.unit);
- view_set_pressure(weather->pressure.value, weather->pressure.unit);
- view_set_wind(weather->wind.name, weather->wind.speed_value, weather->wind.direction_name);
- view_set_clouds(weather->clouds.name);
- view_set_percipitation(weather->precipitation.value);
- view_set_last_update(asctime(&weather->last_update));
- }
-
- if (icon_data && icon_data_len > 0) {
- view_set_icon(icon_data, icon_data_len);
- }
-}
-</pre>
-
-<h3>Weather poll thread controller module</h3>
-
-<p>This module introduces a single <span style="font-family: Courier New,Courier,monospace">ecore timer</span> and its callback launched periodically to execute server data poll function in a separate thread.
-Initialization code is shown below.</p>
-
-<pre class="prettyprint">
-bool weather_poll_thread_init(weather_poll_data_ready_cb cb)
-{
- // Variables definitions and error handling ...
-
- wpt.tim = ecore_timer_add(1.0, __weather_poll_timer_cb, NULL);
-
- // Error handling ...
-
- ecore_timer_freeze(wpt.tim);
-
- return true;
-}
-</pre>
-
-<pre class="prettyprint">
-static Eina_Bool __weather_poll_timer_cb(void *data)
-{
- ecore_timer_interval_set(wpt.tim, WEATHER_POLL_INTERVAL_SEC);
-
- if (!wpt.thread_h) {
- wpt.thread_h = ecore_thread_run(__thread_function, __thread_end_cb, __thread_cancelled_cb, NULL);
-
- // Error handling ...
- }
-
- return EINA_TRUE;
-}
-</pre>
-
-<p>Both <span style="font-family: Courier New,Courier,monospace">__thread_function()</span>
-and <span style="font-family: Courier New,Courier,monospace">__weather_data_read_cb()</span> functions are executed
-on behalf of a separate thread. Since <span style="font-family: Courier New,Courier,monospace">weather_query()</span>
-is a blocking function, its execution from main thread would lock up the UI.
-</p>
-<pre class="prettyprint">
-static void __thread_function(void *data, Ecore_Thread *thread)
-{
- if (!weather_query(__weather_data_read_cb))
- dlog_print(DLOG_ERROR, LOG_TAG, "Failed to make a query");
-}
-</pre>
-
-<p>Any UI update function calls from <span style="font-family: Courier New,Courier,monospace">__weather_data_read_cb()</span>
-are prohibited. So this callback only stores pointers to received data in common memory area.</p>
-
-<pre class="prettyprint">
-static void __weather_data_read_cb(xml_weather_t *weather, image_buffer_t *image_buffer)
-{
- wpt.weather = weather;
- wpt.image_buffer = image_buffer;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">__thread_end_cb()</span> however is called automatically when the
-<span style="font-family: Courier New,Courier,monospace">__thread_function()</span> finishes successfully.
-It is called on behalf of the main thread and this is why it can call a callback from the main controller (updating the UI).
-Server data pointers, previously stored by the <span style="font-family: Courier New,Courier,monospace">__weather_data_read_cb()</span>
-function, are used.
-</p>
-
-<pre class="prettyprint">
-static void __thread_end_cb(void *data, Ecore_Thread *thread)
-{
- char *buffer = NULL;
- int buffer_size = 0;
-
- if (wpt.image_buffer) {
- buffer = wpt.image_buffer->buffer;
- buffer_size = wpt.image_buffer->size;
- }
-
- if (wpt.cb)
- wpt.cb(wpt.weather, buffer, buffer_size);
-
- xml_weather_dispose(wpt.weather);
- weather_free_image_buffer(wpt.image_buffer);
- wpt.weather = NULL;
- wpt.image_buffer = NULL;
- wpt.thread_h = NULL;
-}
-</pre>
-
-<h3>Main view module</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">watch_app_get_elm_win()</span>
-function is used to obtain a special watch type window. This way the application can receive ambient/normal mode switch events properly.</p>
-
-<pre class="prettyprint">
-bool view_create_gui(int width, int height)
-{
- watch_app_get_elm_win(&vd.win);
-
- // Error handling ...
-
- evas_object_resize(vd.win, width, height);
-
- vd.digital_clock = digital_clock_create(vd.win, width, height);
- evas_object_show(vd.digital_clock);
-
- vd.weather = weather_create(vd.win, width, height);
-
- // Common code ...
-}
-</pre>
-
-<p>Each time a time tick occurs, the controller module calls <span style="font-family: Courier New,Courier,monospace">view_set_time()</span>
-function. It updates the digital clock available in the normal application mode.</p>
-
-<pre class="prettyprint">
-void view_set_time(int hours, int minutes, int seconds,
- int year, int month, int day, int week_day)
-{
- digital_clock_set_time(vd.digital_clock, hours, minutes);
-}
-</pre>
-
-<p>The function below is called each time the application mode change occurs. Notice that in ambient mode only the
-weather view is shown, whereas in normal mode only the digital clock is visible.</p>
-
-<pre class="prettyprint">
-void view_set_ambient(bool on_off)
-{
- vd.ambient = on_off;
-
- if (on_off) {
- evas_object_show(vd.weather);
- evas_object_hide(vd.digital_clock);
- } else {
- evas_object_show(vd.digital_clock);
- evas_object_hide(vd.weather);
- }
-}
-</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>
Evas_Object *layout = NULL;
Evas_Object *progress = NULL;
Elm_Object_Item *navi_it = NULL;
- char edj_path[PATH_MAX] = { 0, };
+ char edj_path[PATH_MAX] = {0,};
ad->role = BT_SOCKET_SERVER;
Evas_Object *layout = NULL;
Evas_Object *input_field = NULL;
Evas_Object *btn_send = NULL;
- char edj_path[PATH_MAX] = { 0, };
+ char edj_path[PATH_MAX] = {0,};
retv_if(!ad, NULL);
ret = bt_socket_send_data(ad->socket_fd, main_text, strlen(main_text)+1);
if (ret == -1)
{
- _E("[bt_socket_send_data] send to fail : %s", main_text);
+ _E("[bt_socket_send_data] failed to send: %s", main_text);
noti = bt_noti_popup_create(ad->navi, "Send Failed");
if (!noti)
{
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
static void
_setting_volume_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
appdata_s *ad = data;
Evas_Object *naviframe = ad->naviframe;
Evas_Object *layout = NULL;
static void
_setting_brightness_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
appdata_s *ad = data;
Evas_Object *naviframe = ad->naviframe;
Evas_Object *layout = NULL;
Evas_Object *slider = NULL;
Evas_Object *box = NULL;
- Evas_Object *rect[10] = {NULL, };
+ Evas_Object *rect[10] = {NULL,};
Elm_Object_Item *nf_it = NULL;
int i;
static void
_setting_information_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
appdata_s *ad = data;
Evas_Object *naviframe = ad->naviframe;
Evas_Object *layout = NULL;
ret = watch_app_main(argc, argv, &event_callback, &ad);
if (ret != APP_ERROR_NONE)
{
- _E("watch_app_main() is failed. err = %d", ret);
+ _E("watch_app_main() failed. err = %d", ret);
}
return ret;
if (watch_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED],
APP_EVENT_LANGUAGE_CHANGED, lang_changed, NULL) != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler () is failed");
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler () failed");
}
_create_base_gui(ad);
bg = elm_bg_add(ad->layout);
ret = elm_bg_file_set(bg, IMG_DIR"bg.jpg", NULL);
- retvm_if(!ret, NULL, "Fail to set the background image");
+ retvm_if(!ret, NULL, "Failed to set the background image");
elm_bg_option_set(bg, ELM_BG_OPTION_CENTER);
elm_object_part_content_set(ad->layout, "bg_image", bg);
<td>Demonstrates how you can use the widget service and viewer.</td>
</tr>
<tr>
- <td><a href="ambientweather_wn.htm">Ambient weather</a></td>
- <td>Demonstrates how you can implement a simple watch with current weather display in ambient mode.</td>
- </tr>
+ <td><a href="ambientweather_sd_wn.htm">Ambient Weather</a></td>
+ <td>Demonstrates how you can implement a simple watch with the current weather displayed in the ambient mode.</td>
+ </tr>
<tr>
<td><a href="analog_watch_sd_wn.htm">Analog Watch</a></td>
<td>Demonstrates how you can implement an analog watch application.</td>
<ol>
<li>Create a widget application by calling the <span style="font-family: Courier New,Courier,monospace;">widget_app_main()</span> function in the main function. You can register the widget application life-cycle callbacks when you call the <span style="font-family: Courier New,Courier,monospace;">widget_app_main()</span> function.
<pre class="prettyprint">
-widget_app_lifecycle_callback_s ops = { 0, };
+widget_app_lifecycle_callback_s ops = {0,};
int ret;
ops.create = widget_app_create;
ret = widget_app_main(argc, argv, &ops, NULL);
if (ret != WIDGET_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "widget_app_main() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "widget_app_main() failed. err = %d", ret);
}
</pre>
</li>
/* Show the alert popup */
/* @param {string} message Message */
- function openAlert(message) {
+ function openAlert(message)
+ {
alertMessage.innerHTML = message;
tau.openPopup(alertElement);
}
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The emoji set used in this application
was designed and offered free by Emoji One. For more information on their license terms, see the <a href="http://emojione.com/" target="_blank">Emoji One</a> site.</td>
+ <td class="note">The emoji set used in this application
is designed and offered free by Emoji One. For more information on their license terms, see the <a href="http://emojione.com/" target="_blank">Emoji One</a> site.</td>
</tr>
</tbody>
</table>
<p>The following HTML code illustrates definition of the main screen:</p>
<pre class="prettyprint">
<!--index.html-->
-
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">Demo 3D</h2>
<p>All 3D scene pages are defined in the same way, presented by the following HTML code. The actual 3D scene is rendered in 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.</p>
<pre class="prettyprint">
<!--index.html-->
-
<div class="ui-page scene-3d-page" id="light">
<header class="ui-header">
<h2 class="ui-title">Light & shadow</h2>
<li><span style="font-family: Courier New,Courier,monospace">renderSceneFn</span>: Custom method rendering the scene</li></ul>
<pre class="prettyprint">
/* js/helpers/lifecycle.js */
-
function initPage(page, initSceneFn, renderSceneFn) {}
</pre>
<p>This method detects whether the page is displayed or hidden. If it is displayed, the <span style="font-family: Courier New,Courier,monospace">renderSceneFn()</span> method is called in a loop to make the 3D animation. Otherwise, the loop is stopped.</p>
<li>Add page listeners in the <span style="font-family: Courier New,Courier,monospace">initPage()</span> method:
<pre class="prettyprint">
/* js/helpers/lifecycle.js */
-
page.addEventListener('pageshow', onPageShow, false);
page.addEventListener('pagehide', onPageHide, false);
</pre></li>
<p>The <span style="font-family: Courier New,Courier,monospace">onPageShow()</span> method checks whether the page was initialized and, if not, initializes it, and starts the animation loop by setting the <span style="font-family: Courier New,Courier,monospace">animationRunning</span> variable to <span style="font-family: Courier New,Courier,monospace">false</span>. The <span style="font-family: Courier New,Courier,monospace">onPageHide()</span> method stops the animation loop by setting the <span style="font-family: Courier New,Courier,monospace">animationRunning</span> variable to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
<pre class="prettyprint">
/* js/helpers/lifecycle.js */
-
var sceneInitialized = false,
animationRunning = false;
<pre class="prettyprint">
/* js/helpers/lifecycle.js */
-
var timestamp = 0, /* Timestamp of last scene rendering */
animationRunning = false, /* Indicates whether the animation is running */
renderSceneFn = null, /* Rendering method */
<p>To create the scene, which is a container for the 3D objects:</p>
<pre class="prettyprint">
/* js/views/cube.js */
-
var scene = null;
function createScene()
<p>To create the camera and set its initial position:</p>
<pre class="prettyprint">
/* js/views/cube.js */
-
var camera = null;
function createCamera()
<p>To create the renderer, which is an object that creates a canvas element and renders the scene in this canvas, and to configure it and add the canvas to the content element of the page:</p>
<pre class="prettyprint">
/* js/views/cube.js */
-
var content = null, /* Content of the page (HTML div) */
renderer = null;
<p>When the methods for creating the scene elements are defined, you can initialize the page by creating a scene, camera, and renderer. The animation frames are created by rendering the scene by the renderer.</p>
<pre class="prettyprint">
/* js/views/cube.js */
-
var page = null; /* Reference to the page HTML element */
function initScene()
<p>To create a textured cube, you must create a different type of material using the <span style="font-family: Courier New,Courier,monospace">THREE.MeshFaceMaterial()</span> method. The following method creates a material of the cube built from 3 textures:</p>
<pre class="prettyprint">
/* js/views/cube.js */
-
var texturedMaterial; /* Here is textured material */
function initTexturedMaterial()
<pre class="prettyprint">
/* js/views/cube.js */
-
function createTexturedCube()
{
var geometry = new THREE.BoxGeometry(EDGE_LENGTH, EDGE_LENGTH, EDGE_LENGTH);
<ol><li>The floor object receives shadows, but does not cast them. The following method creates a plane with a light-absorbing material and adds it to the scene:
<pre class="prettyprint">
/* js/views/light.js */
-
var FLOOR_SIZE = 2000,
FLOOR_COLOR = 0x076100;
<li>The box on the floor must have different properties. It must cast a shadow (on a floor), but not receive it. The following method illustrates how to create such a box:
<pre class="prettyprint">
/* js/views/light.js */
-
var CUBE_COLOR = 0xff0000,
CUBE_EDGE_LENGTH = 100;
<p>The following method creates both the lights and adds them to the scene. The ambient light gets the color as a parameter. The directional light gets a color and intensity as input parameters. Also 3 other parameters are set to the directional light: shadow map width and height (in pixels) and shadow darkness (the darkness of shadow casted by this light, from 0 to 1).</p>
<pre class="prettyprint">
/* js/views/light.js */
-
var AMBIENT_LIGHT_COLOR = 0x5,
DIRECTIONAL_LIGHT_COLOR = 0xdfebff,
DIRECTIONAL_LIGHT_INTENSITY = 0.75,
<li>To see the shadows on the scene, the renderer must be properly configured. The following method sets 3 parameters of the created renderer: the <span style="font-family: Courier New,Courier,monospace">shadowMapEnabled</span> enabling shadows, and the <span style="font-family: Courier New,Courier,monospace">shadowMapType</span> and <span style="font-family: Courier New,Courier,monospace">shadowMapSoft</span> that make the shadows smooth.
<pre class="prettyprint">
/* js/views/light.js */
-
function createRenderer()
{
renderer = new THREE.WebGLRenderer({antialias: true});
<p>To move the camera, you must change its parameters: position, rotate, or both. In the scene illustrating a moving camera, the camera is moving along a curve. Its position and angle are changed frame by frame. The following method recalculates the position of the camera and the point that the camera is looking at:</p>
<pre class="prettyprint">
/* js/views/camera.js */
-
var centerPoint =
{
x: 0,
<p>Call the above method in the <span style="font-family: Courier New,Courier,monospace">render()</span> method:</p>
<pre class="prettyprint">
/* js/views/camera.js */
-
function render()
{
recalculatePositions();
<p>The following method loads a model from a file located under the specified path, scales it by the specified scale value, and adds it to the scene:</p>
<pre class="prettyprint">
/* js/views/camera.js */
-
function loadModel3D(path, scale)
{
new THREE.JSONLoader().load(path,
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>FileManager Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">Filesystem Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>FileManager Sample Overview</h1>
+
+<p>The FileManager sample application demonstrates how you can read and modify the content of the device file system.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+<p>The following figure illustrates the main screens of the FileManager.</p>
+<p class="figure">Figure: FileManager screens</p>
+<p align="center"><img alt="FileManager screens" src="../images/filemanager_ww.png" /></p>
+<p>The application opens with the main screen that shows the available storages. You can select a storage to browse the storage content (folders and files).</p>
+
+<p>On a files page, you can open the menu to perform various operations:</p>
+
+<ul>
+<li>Create new folders or files</li>
+<li>Rename folders or files</li>
+<li>Delete folders or files</li>
+<li>Copy, cut, and paste files</li>
+<li>Display information about a file</li>
+<li>Open the breadcrumb navigation mode</li>
+</ul>
+
+<p>To open a file, select it from the screen.</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/filesystem.write</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/application.launch</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>
+
+<p>The application uses a simple MV (Model View) architecture, where the core part determines the architecture and the app part determines the application behavior. The <span style="font-family: Courier New,Courier,monospace">core.js</span> file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.</p>
+
+<table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/</span></td>
+ <td>This directory contains the helper functions for the DOM manipulation.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/</span></td>
+ <td>This directory contains the application model modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the files that implement the application views.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Implementation</h2>
+
+<h3>Defining the Application Layout</h3>
+
+<p>To define the application layout:</p>
+
+<ol><li>
+<p>The main page displays a list of storages found on the device. The layout consists of a header and a list, which displays the storages:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page ui-page-active" id="main">
+ <header class="ui-header">
+ <h2 class="ui-title">Storages</h2>
+ </header>
+
+ <div class="ui-content content-padding">
+ <ul id="storages-list" class="ui-listview"></ul>
+ </div>
+</div>
+</pre>
+
+<p>The storage list content is generated by the core/template module. This module generates HTML from the specified template file and an object that contains the data (in this case, the storage list). The storage list content is built from the <span style="font-family: Courier New,Courier,monospace">storages-list-content.tpl</span> template file:</p>
+
+<pre class="prettyprint">
+<!--templates/storages-list-content.tpl-->
+<li class="ui-listview-divider">Internal</li>
+{{#internal}}
+ <li><a href="#" data-name="{{this.label}}">
+ <img src="images/create-folder.png"/>
+ {{this.label}}
+ </a></li>
+{{/internal}}
+<li class="ui-listview-divider">External</li>
+{{#external}}
+ <li><a href="#" data-name="{{this.label}}">
+ <img src="images/create-folder.png"/>
+ {{this.label}}
+ </a></li>
+{{/external}}
+</pre></li>
+
+
+<li>
+<p>The files page displays a list of files and folders located in the given folder. The page also contains a <a href="#menu">menu</a> that allows the user to perform actions on the files selected from the list (such as copying and renaming). The layout consists of a header displaying a name of the folder and a list displaying the folder and its content:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page" id="files">
+ <header class="ui-header ui-has-more">
+ <h2 class="ui-title">Directory Name</h2>
+ <button id="open-files-menu" type="button" class="ui-more ui-icon-overflow">
+ Menu
+ </button>
+ </header>
+
+ <div class="ui-content content-padding">
+ <ul id="file-list" class="ui-listview ui-snap-listview"></ul>
+ </div>
+
+ /* HERE MENU POPUPS */
+
+</div>
+</pre>
+<p>The file list content is built from the <span style="font-family: Courier New,Courier,monospace">file-list-content.tpl</span> template file:</p>
+
+<pre class="prettyprint">
+<!--file-list-content.tpl-->
+{{#files}}
+ <li>
+ <a href="#" data-directory="{{this.isDirectory}}" data-name="{{this.name}}">
+ {{?this.isDirectory}}
+ <img src="images/create-folder.png"/>
+ {{/this.isDirectory}}
+ {{?this.isFile}}
+ <img src="images/create-file.png"/>
+ {{/this.isFile}}
+ {{this.name}}
+ </a>
+ </li>
+{{/files}}
+</pre>
+<p>The layout of the page menu is designed in a different way for rectangular and circular screens. The rectangular menu is a list embedded in a popup, while the circular menu is a TAU selector component embedded in a popup:</p>
+<pre class="prettyprint">
+<!--index.html-->
+<!--Rectangular screen menu-->
+<div id="files-menu-square" class="menu square ui-popup" data-transition="slideup">
+ <div class="ui-popup-header">Menu</div>
+ <div class="ui-popup-content">
+ <ul class="ui-listview">
+ <li><a class="menu-create-folder" href="#" data-rel="back">Create folder</a></li>
+ <li><a class="menu-create-file" href="#" data-rel="back">Create file</a></li>
+ <li><a class="menu-rename" href="#" data-rel="back">Rename</a></li>
+ <li><a class="menu-delete" href="#" data-rel="back">Delete</a></li>
+ <li><a class="menu-copy" href="#" data-rel="back">Copy</a></li>
+ <li><a class="menu-cut" href="#" data-rel="back">Cut</a></li>
+ <li><a class="menu-info" href="#" data-rel="back">Info</a></li>
+ <li><a class="menu-breadcrumb" href="#" data-rel="back">Breadcrumb</a></li>
+ </ul>
+ </div>
+</div>
+<!--Circular screen menu-->
+<div id="files-menu-circle" class="menu circle ui-popup">
+ <div class="ui-selector">
+ <div class="menu-create-folder ui-item" data-title="Create folder"></div>
+ <div class="menu-create-file ui-item" data-title="Create file"></div>
+ <div class="menu-delete ui-item" data-title="Delete"></div>
+ <div class="menu-copy ui-item" data-title="Copy"></div>
+ <div class="menu-cut ui-item" data-title="Cut"></div>
+ <div class="menu-info ui-item" data-title="Info"></div>
+ <div class="menu-breadcrumb ui-item" data-title="Breadcrumb"></div>
+ </div>
+</div>
+</pre>
+
+</li>
+<li>
+<p>The file info page displays details about a file or folder. The layout consists of a header and a list of file properties:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page" id="file-info">
+ <header class="ui-header ui-header-small">
+ <h2 class="ui-title">File info</h2>
+ </header>
+
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li class="ui-listview-divider">Name</li>
+ <li id="file-info-name"></li>
+ <li class="ui-listview-divider">Location</li>
+ <li id="file-info-location"></li>
+ <li class="ui-listview-divider file-size">Size</li>
+ <li id="file-info-size" class="file-size"></li>
+ <li class="ui-listview-divider">Creation date</li>
+ <li id="file-info-created"></li>
+ <li class="ui-listview-divider">Last modification date</li>
+ <li id="file-info-modified"></li>
+ <li class="ui-listview-divider">Read only</li>
+ <li id="file-info-readonly"></li>
+ </ul>
+ </div>
+</div>
+</pre>
+</li>
+<li>
+<p>The breadcrumb navigation page displays a list of parent folders of the specified file or folder:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page" id="breadcrumb">
+ <header class="ui-header">
+ <h2 class="ui-title">Breadcrumb navigation</h2>
+ </header>
+
+ <div class="ui-content">
+ <ul id="navigation-list" class="ui-listview"></ul>
+ </div>
+</div>
+</pre>
+<p>The navigation list content is built from the <span style="font-family: Courier New,Courier,monospace">navigation-list-content.tpl</span> template file:</p>
+
+<pre class="prettyprint">
+<!--navigation-list-content.tpl-->
+{{#items}}
+ <li><a href="#" data-path="{{this.path}}">{{this.name}}</a></li>
+{{/items}}
+</pre></li></ol>
+
+<h3 id="menu">Managing the Menu</h3>
+<p>The user can open a menu from the files page to perform operations on the files and folders. Since a separate menu is available for rectangular and circular screens, a helpers/menu module is defined to allow both menus to be treated the same way. The module initializes the right type of menu and publishes methods to manage the menu operations.</p>
+
+<p>To define the menu module:</p>
+
+<ol>
+<li>Define an empty module named helpers/menu and save it in the <span style="font-family: Courier New,Courier,monospace">js/helpers</span> folder.
+<p>The module publishes the API consisting of the following methods:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">initializeMenu()</span>: Checks the screen type and initializes the suitable HTML menu element. This method gets the <span style="font-family: Courier New,Courier,monospace">menuHandlerId</span> parameter, which is an ID of the button that opens the popup menu.</li>
+<li><span style="font-family: Courier New,Courier,monospace">bindMenuClickEventListener()</span>: Allows you to bind a callback to the specified menu item identified by the class name.</li>
+<li><span style="font-family: Courier New,Courier,monospace">setItemHidden()</span>: Allows you to hide or unhide a menu item identified by its class name.</li></ul>
+
+<pre class="prettyprint">
+/* js/helpers/menu.js */
+define('helpers/menu', function menu()
+{
+ 'use strict';
+
+ function initializeMenu(page, menuHandlerId) {}
+
+ function bindMenuClickEventListener(className, listener) {}
+
+ function setItemHidden(className, isHidden) {}
+
+ return
+ {
+ initializeMenu: initializeMenu,
+ bindMenuClickEventListener: bindMenuClickEventListener,
+ setItemHidden: setItemHidden
+ };
+});
+</pre>
+</li>
+<li>Implement the <span style="font-family: Courier New,Courier,monospace">initializeMenu()</span> method.
+<p>The method retrieves the menu popup element from the DOM and registers the click event listener on the menu handler. If the button is clicked, the popup menu is opened.
+For the circular screen devices, an additional initialization is made by the <span style="font-family: Courier New,Courier,monospace">initializeForCircularScreen()</span> method.</p>
+<pre class="prettyprint">
+/* js/helpers/menu.js */
+function initializeMenu(page, menuHandlerId)
+{
+ var content = page.querySelector('.ui-content'),
+ handlerButton = document.getElementById(menuHandlerId),
+ popup = document.querySelector('.menu.' + (tau.support.shape.circle ? 'circle' : 'square'));
+
+ handlerButton.addEventListener('click', function onClick()
+ {
+ tau.openPopup(popup);
+ });
+
+ if (tau.support.shape.circle)
+ {
+ initializeForCircularScreen(page, popup);
+ }
+}
+</pre></li>
+<li>Implement the <span style="font-family: Courier New,Courier,monospace">initializeForCircularScreen()</span> method:
+<ol type="a"><li>Define local variables:
+<pre class="prettyprint">
+function initializeForCircularScreen(page, popup)
+{
+ var selectorWidget = null, /* Reference to the selector component */
+ selectorEl = popup.querySelector('.ui-selector'), /* Reference to the selector in the selector component */
+ menuItems = popup.querySelectorAll('.ui-item'), /* References to the menu items */
+ popupHideCallback = null; /* Callback executed when the menu popup is being closed */
+</pre></li>
+<li>Register event listeners for opening and hiding the page. When the page is opened, the selector component must be initialized. When the page is closed, the component must be destroyed.
+<pre class="prettyprint">
+ page.addEventListener('pagebeforeshow', function onPageBeforeShow()
+ {
+ selectorWidget = tau.widget.Selector(selectorEl,
+ {
+ itemRadius: window.innerHeight / 2 * 0.8
+ });
+ });
+
+ page.addEventListener('pagebeforehide', function onPageBeforeHide()
+ {
+ selectorWidget.destroy();
+ });
+</pre></li>
+<li>Register the event listener for the page show.
+<p>This listener is called only once, and it registers click event listeners on the menu items. When a menu item is clicked, it sets the suitable callback to be invoked. The collection of such callbacks is held in the <span style="font-family: Courier New,Courier,monospace">menuListeners</span> object, and the callbacks are added there by calling the <span style="font-family: Courier New,Courier,monospace">bindMenuClickEventListener()</span> method.</p>
+<p>The menu item callback is not invoked immediately, but only under the following circumstances:</p>
+<ul><li>Callback must exist (not <span style="font-family: Courier New,Courier,monospace">null</span>)</li>
+<li>Item must be enabled (cannot have the hidden class)</li>
+</ul>
+<p>The popup is closed when the selector indicator from the selector component is clicked.</p>
+<pre class="prettyprint">
+ page.addEventListener('pageshow', function onPageShow()
+ {
+ var indicator = popup.querySelector('.ui-selector-indicator');
+
+ indicator.addEventListener('click', function onClick()
+ {
+ var selectedItemId = parseInt(indicator.dataset.index, 10),
+ selectedItemClassList = menuItems[selectedItemId].classList,
+ i = 0,
+ length = selectedItemClassList.length,
+ listener = null; /* Callback that is invoked when the popup is closed */
+
+ for (i = 0; i < length; i += 1)
+ {
+ listener = menuListeners[selectedItemClassList[i]];
+ if (typeof listener === 'function')
+ {
+ if (!selectedItemClassList.contains('hidden'))
+ {
+ popupHideCallback = listener;
+ tau.closePopup(popup);
+ }
+
+ return;
+ }
+ }
+ });
+
+ page.removeEventListener('pageshow', onPageShow);
+ });
+</pre></li>
+<li>Register the popup hide event listener:
+<pre class="prettyprint">
+ popup.addEventListener('popuphide', function onPopupHide()
+ {
+ if (typeof popupHideCallback === 'function')
+ {
+ popupHideCallback();
+ popupHideCallback = null;
+ }
+ });
+}
+</pre></li></ol></li>
+<li>Implement the <span style="font-family: Courier New,Courier,monospace">bindMenuClickEventListener()</span> method.
+<p>First, define a map holding all click listeners on the menu items. The keys of the map are the class names of the items and values are the listener methods. This map is used in the circular screen devices. Finally, implement the method itself.</p>
+<p>For the circular screen devices, the listener is added to the <span style="font-family: Courier New,Courier,monospace">menuListeners</span> map. For the rectangular screen devices, it is registered as a click event listener on the related menu item.</p>
+<pre class="prettyprint">
+/* js/helpers/menu.js */
+var menuListeners = {};
+
+function bindMenuClickEventListener(className, listener)
+{
+ if (tau.support.shape.circle)
+ {
+ menuListeners[className] = listener;
+ }
+ else
+ {
+ document.querySelector('#files-menu-square .' + className).addEventListener('click', listener);
+ }
+}
+</pre></li>
+<li>Implement the <span style="font-family: Courier New,Courier,monospace">setItemHidden()</span> method. It retrieves the menu item element from the DOM and adds or removes the hidden class from the element.
+<pre class="prettyprint">
+function setItemHidden(className, isHidden)
+{
+ var menuItem = null;
+
+ if (tau.support.shape.circle)
+ {
+ menuItem = document.getElementById('files-menu-circle')
+ .getElementsByClassName(className)[0];
+ }
+ else
+ {
+ menuItem = document.getElementById('files-menu-square')
+ .getElementsByClassName(className)[0].parentNode;
+ }
+
+ if (!menuItem)
+ {
+ return;
+ }
+
+ if (isHidden)
+ {
+ menuItem.classList.add('hidden');
+ }
+ else
+ {
+ menuItem.classList.remove('hidden');
+ }
+}
+</pre></li></ol>
+
+<h3>Managing Storages</h3>
+
+<p>The main page displays a list of storages. The list is refreshed and retrieved automatically when the storage list changes, for example, when an external storage is mounted:</p>
+
+<ol>
+<li>Retrieve the storage list:
+<ol type="a">
+<li>Storages are retrieved by calling the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.listStorages()</span> method, which uses the <span style="font-family: Courier New,Courier,monospace">getStorages()</span> method from the Core framework to return the storage list in the <span style="font-family: Courier New,Courier,monospace">Promise</span> object:
+
+<pre class="prettyprint">
+/* js/core/fs.js */
+function getStorages(filter)
+{
+ return new Promise(function promise(resolve)
+ {
+ tizen.filesystem.listStorages(function getStorages(storages)
+ {
+ if (!filter)
+ {
+ resolve(storages);
+ }
+ else
+ {
+ /* Filtering storages */
+ }
+ });
+ });
+}
+</pre>
+<p>All asynchronous filesystem operations in this sample are wrapped in <span style="font-family: Courier New,Courier,monospace">Promise</span> objects. For more information on <span style="font-family: Courier New,Courier,monospace">Promise</span> objects, see <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">MDN Promise</a> and <a href="https://www.w3.org/2001/tag/doc/promises-guide" target="_blank">Writing Promise-Using Specifications</a>.</p>
+</li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">getStorages()</span> method is used in the models/filesystem module:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function getStorages()
+{
+ return fs.getStorages().then(filterStorages).then(categorizeStorages);
+}
+</pre>
+</li>
+<li>Storages are filtered and categorized after retrieval. The filtering excludes storages that are private, unmounted, or have an empty label:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+var STORAGE_STATE_MOUNTED = 'MOUNTED',
+ PRIVATE_STORAGES =
+ [
+ 'wgt-package',
+ 'wgt-private',
+ 'wgt-private-tmp'
+ ];
+
+function filterStorages(storages)
+{
+ var result = [],
+ i = 0,
+ length = storages.length,
+ storage = null;
+
+ for (; i < length; i += 1)
+ {
+ storage = storages[i];
+ if (storage.label.length > 0 &&
+ storage.state === STORAGE_STATE_MOUNTED &&
+ PRIVATE_STORAGES.indexOf(storage.label) === -1)
+ {
+ result.push(storage);
+ }
+ }
+
+ return result;
+}
+</pre>
+<p>Storages are displayed on the main page in the form of 2 lists: internal and external storages. The categorization divides storages into these lists:</p>
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+var STORAGE_TYPE_INTERNAL = 'INTERNAL',
+ STORAGE_TYPE_EXTERNAL = 'EXTERNAL';
+
+function categorizeStorages(storages)
+{
+ var external = [],
+ internal = [],
+ len = storages.length,
+ i = 0,
+ storage = null;
+
+ for (i = 0; i < len; i += 1)
+ {
+ storage = storages[i];
+ if (storage.type === STORAGE_TYPE_INTERNAL)
+ {
+ internal.push(storage);
+ }
+ else if (storage.type === STORAGE_TYPE_EXTERNAL)
+ {
+ external.push(storage);
+ }
+ }
+
+ return
+ {
+ internal: internal,
+ external: external
+ };
+}
+</pre>
+</li>
+</ol></li>
+<li>Display the storage list on the main page:
+<ol type="a">
+<li>Call the <span style="font-family: Courier New,Courier,monospace">getStorages()</span> method defined above:
+<pre class="prettyprint">
+/* js/views/main.js */
+filesystem.getStorages().then(onGetStorages, showErrorPopup);
+</pre>
+</li>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">onGetStorages()</span> callback, which was used above:
+<pre class="prettyprint">
+/* js/views/main.js */
+function onGetStorages(storages)
+{
+ reloadStoragesList(storages);
+}
+</pre>
+</li>
+<li id="reload">Define the <span style="font-family: Courier New,Courier,monospace">reloadStoragesList()</span> method that creates HTML content of the storage list on the main page:
+<pre class="prettyprint">
+/* js/views/main.js */
+function reloadStoragesList(storages)
+{
+ storages.foundInternals = storages.internal.length > 0;
+ storages.foundExternals = storages.external.length > 0;
+ storagesList.innerHTML = template.get('storages-list-content', storages);
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">storagesList</span> variable is a reference to the storage list element on the page. This method prepares the parameter of the <span style="font-family: Courier New,Courier,monospace">storages-list-content.tpl</span> template and generates HTML content using this template. The generated content is attached to the list.</p>
+</li>
+</ol>
+</li>
+<li>Monitor storage state changes:
+<ol type="a">
+<li>The storages are refreshed on the page when their state changes. The storage change listener is registered in the initialization process:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function init()
+{
+ tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onStorageStateChanged()</span> callback fires an event with the list of storages after change. The event is handled by the main view.
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+var events = ...; /* Reference to the event module from the Core framework */
+
+function onStorageStateChanged(storages)
+{
+ events.fire('storages.changed', {storages: storages});
+}
+</pre>
+</li>
+<li>To update the main page, define the listener method that handles the storage state change events. The <span style="font-family: Courier New,Courier,monospace">reloadStoragesList()</span> method was <a href="#reload">defined earlier</a>.
+<pre class="prettyprint">
+/* js/views/main.js */
+function onStoragesChanged(ev)
+{
+ reloadStoragesList(ev.detail);
+}
+</pre>
+<p>The listener creates the storage list content by using the template and sets the content to the list.</p>
+</li>
+<li>Register the listener:
+<pre class="prettyprint">
+/* js/views/main.js */
+events.listeners(
+{
+ 'models.filesystem.storages.changed': onStoragesChanged
+});
+</pre>
+</li>
+</ol>
+</li></ol>
+
+<h3>Navigating the File System</h3>
+
+<p>Navigation over the file system tree is available in the files view. This view displays the content of a folder named the current folder. </p>
+<p>When the user taps the folder element of the content, this folder becomes the current folder and the page is reloaded displaying its content. When the user fires the back event (by swiping the files screen from top to bottom), the files view displays the content of the parent of the current folder.</p>
+
+<ol>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">js/models/state.js</span> module, which contains the application state. The application state is a set of application properties among which is the currently displayed folder path and information on whether the hidden files are supposed to be displayed.
+<pre class="prettyprint">
+/* js/models/state.js */
+define('models/state', function state()
+{
+ 'use strict';
+
+ var currentPath = null,
+ hiddenFilesVisible = false;
+
+ function setCurrentPath(path)
+ {
+ currentPath = path;
+ }
+
+ function getCurrentPath()
+ {
+ return currentPath;
+ }
+
+ function setHiddenFilesVisible(visible)
+ {
+ hiddenFilesVisible = visible;
+ }
+
+ function getHiddenFilesVisible()
+ {
+ return hiddenFilesVisible;
+ }
+
+ return
+ {
+ setCurrentPath: setCurrentPath,
+ getCurrentPath: getCurrentPath,
+ setHiddenFilesVisible: setHiddenFilesVisible,
+ getHiddenFilesVisible: getHiddenFilesVisible
+ };
+});
+</pre>
+</li>
+<li>Get the list of files using the <span style="font-family: Courier New,Courier,monospace">getFiles()</span> method from the models/filesystem module:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function getFiles(path, includeHiddenFiles)
+{
+ return getDirectory(path).then(function onGetFileListHandler(dir)
+ {
+ return listFiles(dir, !!includeHiddenFiles);
+ });
+}
+</pre>
+<p>The method gets as input parameters the path of the folder and the flag indicating whether hidden files are included.</p></li>
+<li>The <span style="font-family: Courier New,Courier,monospace">getDirectory()</span> method is used to obtain the <span style="font-family: Courier New,Courier,monospace">File</span> instance of the folder containing the desired files. This method calls the <span style="font-family: Courier New,Courier,monospace">resolveFile()</span> method from the Core framework:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function getDirectory(path)
+{
+ return fs.resolveFile(path);
+}
+
+/* js/core/fs.js */
+function resolveFile(path, openMode)
+{
+ return new Promise(function promise(resolve, reject)
+ {
+ tizen.filesystem.resolve(path, resolve, reject, openMode || 'rw');
+ });
+}
+</pre>
+</li>
+<li>When you have the <span style="font-family: Courier New,Courier,monospace">File</span> instance of the folder, the <span style="font-family: Courier New,Courier,monospace">getFiles()</span> method calls the <span style="font-family: Courier New,Courier,monospace">listFiles()</span> method that retrieves the files from this folder and filters them:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function listFiles(directory, includeHiddenFiles)
+{
+ return new Promise(function promise(resolve, reject)
+ {
+ directory.listFiles(resolve, reject);
+ }).then(function onGetFiles(files)
+ {
+ return filterFiles(files, includeHiddenFiles);
+ });
+}
+</pre>
+
+</li>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">filterFiles()</span> method that returns the specified filtered files array. The filtering consists of excluding files that have a name equal to an empty string and those that are hidden (their name starts with a dot), if the second input parameter of the method equals <span style="font-family: Courier New,Courier,monospace">false</span>.
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function filterFiles(files, includeHiddenFiles)
+{
+ var result = [],
+ i = 0,
+ length = files.length,
+ file = null;
+
+ for (; i < length; i += 1)
+ {
+ file = files[i];
+ if (file.name !== '' &&
+ (includeHiddenFiles || file.name.charAt(0) !== '.'))
+ {
+ result.push(file);
+ }
+ }
+
+ return result;
+}
+</pre>
+<p>Afterwards, pass the filter objects to the files view.</p>
+</li>
+<li>Display the files of a folder on the screen:
+<ol type="a"><li>Define the <span style="font-family: Courier New,Courier,monospace">reloadPage()</span> method in the files view module. This method gets the files of the currently displayed folder (the path is held by the models/state module) and renders them in the file list.
+<pre class="prettyprint">
+/* js/views/files.js */
+function reloadPage()
+{
+ filesystem
+ .getFiles(state.getCurrentPath(), state.getHiddenFilesVisible())
+ .then(onGetFilesSuccess, onGetFilesError);
+}
+</pre>
+<p>In the above method, the <span style="font-family: Courier New,Courier,monospace">filesystem</span> variable is a reference to the models/filesystem module and the <span style="font-family: Courier New,Courier,monospace">state</span> variable is a reference to the models/state module.</p>
+</li>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">onGetFilesSuccess()</span> callback that sorts the received files and calls the <span style="font-family: Courier New,Courier,monospace">reloadFileList()</span> method to render the files in the list:
+<pre class="prettyprint">
+/* js/views/files.js */
+var files = [];
+
+function onGetFilesSuccess(result)
+{
+ files = result.sort(compareFiles);
+
+ reloadFileList();
+}
+
+function reloadFileList()
+{
+ fileList.innerHTML = template.get('file-list-content', {files: files});
+}
+</pre></li></ol>
+</li>
+<li>Open a folder when the user clicks on it:
+<ol type="a"><li>Add the click event listener on the file list:
+<pre class="prettyprint">
+/* js/views/files.js */
+fileList.addEventListener('click', onFileListClick);
+
+function onFileListClick(ev)
+{
+ onListElementClick(ev);
+}
+</pre></li>
+<li>Implement a method that is called when the list item is clicked. This method checks whether the clicked item has the <span style="font-family: Courier New,Courier,monospace">data-directory</span> attribute set to <span style="font-family: Courier New,Courier,monospace">true</span>. If so, the folder referred by this item is opened by the <span style="font-family: Courier New,Courier,monospace">openDirectory()</span> method.
+<pre class="prettyprint">
+/* js/views/files.js */
+function onListElementClick(ev)
+{
+ var anchor = dom.findClosestElementByTag(ev.target, 'A'),
+ name = null;
+
+ if (anchor)
+ {
+ name = anchor.dataset.name;
+ if (anchor.dataset.directory === 'true')
+ {
+ openDirectory(name);
+ }
+ else
+ {}
+ }
+}
+</pre></li>
+<li>Implement the <span style="font-family: Courier New,Courier,monospace">openDirectory()</span> method. This method sets the current folder path in the application state and reloads the page using the <span style="font-family: Courier New,Courier,monospace">reloadPage()</span> method described previously.
+<pre class="prettyprint">
+/* js/views/files.js */
+function openDirectory(name)
+{
+ state.setCurrentPath(getNodePath(name));
+ reloadPage();
+}
+</pre></li>
+<li>Implement the <span style="font-family: Courier New,Courier,monospace">getNodePath()</span> helper method that obtains a file or folder name as an input parameter and returns the full path of this item by concatenating the current folder path with this name:
+<pre class="prettyprint">
+/* js/views/files.js */
+function getNodePath(fileName)
+{
+ return state.getCurrentPath() + filesystem.SEPARATOR + fileName;
+}
+</pre>
+</li></ol>
+
+</li>
+</ol>
+
+<h3>Creating Files and Folders</h3>
+
+<p>To create files and folders, use the <span style="font-family: Courier New,Courier,monospace">createFile()</span> and <span style="font-family: Courier New,Courier,monospace">createDirectory()</span> methods from the models/filesystem module:</p>
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function createFile(path)
+{
+ var directory = fs.getDirectoryPath(path),
+ fileName = fs.basename(path);
+
+ return getDirectory(directory).then(function onGetDirectoryHandler(directory)
+ {
+ return directory.createFile(filename);
+ });
+}
+
+function createDirectory(path)
+{
+ var directory = fs.getDirectoryPath(path),
+ name = fs.basename(path);
+
+ return getDirectory(directory).then(function onGetDirectoryHandler(dir)
+ {
+ return dir.createDirectory(name);
+ });
+}
+</pre>
+
+<p>The above methods get a full path of the node that is to be created and return a <span style="font-family: Courier New,Courier,monospace">Promise</span> object that creates the node. To create a node, its parent folder is resolved by the <span style="font-family: Courier New,Courier,monospace">getDirectory()</span> method and the <span style="font-family: Courier New,Courier,monospace">createFile()</span> or <span style="font-family: Courier New,Courier,monospace">createDirectory()</span> method from the Filesystem API if called on the parent folder object.</p>
+
+<p>For devices not supporting a virtual keyboard, the name of the created file or folder cannot be chosen by the user. In that case, the name is generated by the models/filesystem module. The generated name must be unique in the folder, where the file is placed. The generation is made by the <span style="font-family: Courier New,Courier,monospace">generateName()</span> method:</p>
+
+<ol><li>The <span style="font-family: Courier New,Courier,monospace">generateName()</span> method gets as an input parameter a path of the file or folder that is supposed to be created. For the file creation, its name is initially "File" so the path must be <span style="font-family: Courier New,Courier,monospace">current/directory/path/File</span>. If such a file does not exist in the filesystem, the path is unique, and the method returns it.</li>
+<li>If the generated path is not unique, the method generates a new name, which starts as the given name but ends with the " (n)" string, where n is the smallest integer that makes the name unique.
+<p>For example, if the <span style="font-family: Courier New,Courier,monospace">current/directory/path/File</span> file exists in the filesystem and the <span style="font-family: Courier New,Courier,monospace">generateName()</span> method gets the <span style="font-family: Courier New,Courier,monospace">current/directory/path/File</span> string as an input parameter, it returns <span style="font-family: Courier New,Courier,monospace">current/directory/path/File (1)</span>.</p>
+<p>When the given path ends with " (n)", the method tries to increment n instead of creating another " (n)" suffix. For example, when the method gets the <span style="font-family: Courier New,Courier,monospace">current/directory/path/File (1)</span> string and such a file exists, the returned string is not <span style="font-family: Courier New,Courier,monospace">current/directory/path/File (1) (1)</span>, but <span style="font-family: Courier New,Courier,monospace">current/directory/path/File (2)</span>.</p></li></ol>
+
+<p>The following code illustrates the implementation of the <span style="font-family: Courier New,Courier,monospace">generateName()</span> method. Firstly, a regular expression checks whether the given path ends with the " (n)" string. If so, the n is extracted to the <span style="font-family: Courier New,Courier,monospace">nr</span> variable. If not, the <span style="font-family: Courier New,Courier,monospace">nr</span> variable is equal to 0. Secondly, the <span style="font-family: Courier New,Courier,monospace">tryGenerateName()</span> method is called to generate a unique name.</p>
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function generateName(path)
+{
+ var pathElements = path.split(SEPARATOR),
+ fileName = pathElements.pop(),
+ directoryPath = pathElements.join(SEPARATOR),
+ regexResult = / \((\d+)\)$/.exec(fileName),
+ nr = 0;
+
+ if (regexResult)
+ {
+ fileName = fileName.substring(0, fileName.length - regexResult[0].length);
+ nr = parseInt(regexResult[1], 10);
+ }
+
+ return tryGenerateName(directoryPath, fileName, nr);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">tryGenerateName()</span> method gets as input parameters the parent folder path, the file name, and the <span style="font-family: Courier New,Courier,monospace">nr</span> variable. These 3 parameters create a full path of generated name in the following way: <span style="font-family: Courier New,Courier,monospace">path/prefix (nr)</span>.</p>
+
+<p>The method increments the <span style="font-family: Courier New,Courier,monospace">nr</span> as long as the generated name is not unique. Checking whether the generated path is unique is made by resolving it using the <span style="font-family: Courier New,Courier,monospace">fs.resolveFile()</span> method. If a <span style="font-family: Courier New,Courier,monospace">NotFoundError</span> exception is thrown, the file does not exist, and the generated path is unique. Otherwise, the <span style="font-family: Courier New,Courier,monospace">tryGenerateName()</span> method is called recursively with the <span style="font-family: Courier New,Courier,monospace">nr</span> parameter increased each time.</p>
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function tryGenerateName(path, prefix, nr)
+{
+ var name = prefix + (nr === 0 ? '' : ' (' + nr + ')');
+
+ return fs.resolveFile(path + SEPARATOR + name).then(function onResolved()
+ {
+ return tryGenerateName(path, prefix, nr + 1);
+ }).catch(function onError(e)
+ {
+ if (e.type === 'NotFoundError')
+ {
+ return name;
+ }
+ else
+ {
+ throw e;
+ }
+ });
+}
+</pre>
+
+<h3>Deleting Files and Folders</h3>
+
+<p>Deleting files and folders is implemented in the models/filesystem module. Since the files view allows the user to select multiple files for deletion, the filesystem module provides a method to delete a list of files (or folders).</p>
+
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">deleteFiles()</span> method to removes nodes (files or folders) identified by the paths passed as an input parameter:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function deleteFiles(files)
+{
+ if (files.length === 0)
+ {
+ return EMPTY_PROMISE;
+ }
+
+ var directoryPath = fs.getDirectoryPath(files[0]);
+
+ return getDirectory(directoryPath).then(function onGetDirectoryHandler(directory)
+ {
+ return deleteFileListInDirectory(files, directory);
+ });
+}
+</pre>
+</li>
+<li>To delete a node, the <span style="font-family: Courier New,Courier,monospace">File</span> instance of its parent folder is needed. The method above retrieves such an instance and passes it to the <span style="font-family: Courier New,Courier,monospace">deleteFileListInDirectory()</span> method, which removes the nodes:
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function deleteFileListInDirectory(files, directory)
+{
+ if (files.length === 0)
+ {
+ return EMPTY_PROMISE;
+ }
+
+ var filePath = files.shift();
+
+ return getDirectory(filePath).then(function onGetDirectoryHandler(file)
+ {
+ if (file.isDirectory)
+ {
+ return fs.deleteDirectory(directory, filePath, true);
+ }
+ else
+ {
+ return fs.deleteFile(directory, filePath);
+ }
+ }).then(function onFileDeleted()
+ {
+ return deleteFileListInDirectory(files, directory);
+ });
+}
+</pre>
+</li>
+<li>The removal is executed by the <span style="font-family: Courier New,Courier,monospace">fs.deleteDirectory()</span> and <span style="font-family: Courier New,Courier,monospace">fs.deleteFile()</span> methods of the fs module from the Core framework:
+<pre class="prettyprint">
+/* js/core/fs.js */
+function deleteFile(directoryHandler, filePath)
+{
+ return new Promise(function promise(resolve, reject)
+ {
+ directoryHandler.deleteFile(filePath, resolve, reject);
+ });
+}
+
+function deleteDirectory(parentDirectoryHandler, directoryPath, recursive)
+{
+ return new Promise(function promise(resolve, reject)
+ {
+ parentDirectoryHandler.deleteDirectory(directoryPath, !!recursive, resolve, reject);
+ });
+}
+</pre>
+</li></ol>
+
+<h3>Copying and Moving Files</h3>
+
+<p>Copying and moving is implemented in the models/filesystem module by the <span style="font-family: Courier New,Courier,monospace">copyFiles()</span> and <span style="font-family: Courier New,Courier,monospace">moveFiles()</span> methods.</p>
+
+<p>This section illustrates the copy process. The move process is implemented in a similar way.</p>
+
+<p>To copy files from specified locations (<span style="font-family: Courier New,Courier,monospace">originPaths</span> parameter) to the specified folder (<span style="font-family: Courier New,Courier,monospace">destinationPath</span> parameter), the <span style="font-family: Courier New,Courier,monospace">File</span> instance of the parent folder of the source path is needed. It is retrieved and passed to the <span style="font-family: Courier New,Courier,monospace">copyFileListFromDirectory()</span> method:</p>
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function copyFiles(originPaths, destinationPath)
+{
+ if (originPaths.length === 0)
+ {
+ return EMPTY_PROMISE;
+ }
+
+ var directoryPath = fs.getDirectoryPath(originPaths[0]);
+
+ return getDirectory(directoryPath).then(function onGetDirectoryHandler(directory)
+ {
+ return copyFileListFromDirectory(directory, originPaths, destinationPath);
+ });
+}
+
+/* js/models/filesystem.js */
+function copyFileListFromDirectory(directory, originPaths, destinationPath)
+{
+ if (originPaths.length === 0)
+ {
+ return EMPTY_PROMISE;
+ }
+ var originPath = originPaths.shift();
+
+ return copyTo(directory, originPath,
+ destinationPath + SEPARATOR + fs.basename(originPath))
+ .then(function onFileCopied()
+ {
+ return copyFileListFromDirectory(directory, originPaths, destinationPath);
+ });
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">copyFileListFromDirectory()</span> method works recursively: it takes and removes the first element of the path list, makes a copy, and in a success callback calls itself with the reduced list. When the list is empty, the method stops the recursive loop.</p>
+
+<p>The copy step of the method is implemented by the <span style="font-family: Courier New,Courier,monospace">copyTo()</span> method, which calls the <span style="font-family: Courier New,Courier,monospace">generateName()</span> method to ensure that the specified destination path is not occupied, and if so, generates a free one.</p>
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function copyTo(directory, originPath, destinationPath)
+{
+ var destinationDirectoryPath = destinationPath.split(SEPARATOR).slice(0, -1).join(SEPARATOR);
+
+ return generateName(destinationPath).then(function onGetName(fileName)
+ {
+ return new Promise(function promise(resolve, reject)
+ {
+ directory.copyTo(originPath,
+ destinationDirectoryPath + SEPARATOR + fileName,
+ false, resolve, reject);
+ });
+ });
+}
+</pre>
+
+<h3>Renaming a File or Folder</h3>
+<p>To change the name of a file or folder, call the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method on the <span style="font-family: Courier New,Courier,monospace">File</span> instance referencing the parent folder of the renamed element:</p>
+<pre class="prettyprint">
+/* js/models/filesystem.js */
+function rename(originPath, newName)
+{
+ var currentDirectory = fs.getDirectoryPath(originPath),
+ newDirectory = currentDirectory + SEPARATOR + newName;
+
+ return getDirectory(currentDirectory).then(function onGetDirectoryHandler(dir)
+ {
+ return new Promise(function promise(resolve, reject)
+ {
+ dir.moveTo(originPath, newDirectory, false, resolve, reject);
+ });
+ });
+}
+</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
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/sensor_w.htm">Sensor Guide</a></li>
<li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html">Sensor API</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>MetalDetector Sample Overview</h1>
-<p>The MetalDetector sample application demonstrates how the magnetic sensor can be used by provided methods of the Sensor API. You can monitor the strength of the magnetic field and the direction where the presence of metal was recognized using the Gear device.</p>
+<p>The MetalDetector sample application demonstrates how you can use the magnetic sensor. You can monitor the strength of the magnetic field and the direction where the presence of metal was recognized using the Gear device.</p>
<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
- <p>The following figure shows the main application screens displaying the example values and directions of the measured magnetic field.</p>
- <p class="figure">Figure: MetalDetector screens</p>
- <p align="center"><img alt="MetalDetector screens" src="../images/metaldetector_ww.png" /> </p>
+ <p>The following figure illustrates the main screen of the MetalDetector.</p>
+ <p class="figure">Figure: MetalDetector screen</p>
+ <p align="center"><img alt="MetalDetector screen" src="../images/metaldetector_ww.png" /></p>
+<p align="center"><img alt="MetalDetector error" src="../images/metaldetector_error_ww.png" /></p>
+
+ <p>The application opens with the main screen that displays example values and directions of the measured magnetic field.</p>
<h2>Prerequisites</h2>
<td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
<td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
<td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
</tr>
<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the functions responsible for back key and low battery handling.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
<td><span style="font-family: Courier New,Courier,monospace">js/helpers/calculations.js</span></td>
<td>This file contains the helper for necessary calculations.</td>
</tr>
<td><span style="font-family: Courier New,Courier,monospace">js/models/magnetic.js</span></td>
<td>This file contains the module for managing the magnetic sensor.</td>
</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
- <td>This file contains functions responsible for back key and low battery handling.</td>
- </tr>
+
<tr>
<td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td>
- <td>This file contains functions for implementing the application views and handling the application events.</td>
+ <td>This file contains the functions for implementing the application views and handling the application events.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
<td>This directory contains the external libraries (TAU library).</td>
</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
- <td>This file contains the CSS styling for the application UI.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
- <td>This directory contains the images used to create the user interface.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
- <td>This directory contains the application framework.</td>
- </tr>
</tbody>
</table>
<h3>Application Layout</h3>
-<p>The MetalDetector sample application defines the main screen layout with the main working space and an error popup that can be displayed when the application has no access to the magnetic Sensor API.</p>
-
-<h4>Defining the Main Working Space</h4>
+<p>The MetalDetector sample application defines the main screen layout with the main working space and an error popup that can be displayed when the application has no access to the magnetic Sensor API:</p>
-<p>The main working space contains 3 elements. To be positioned centrally to the UI, each of them is wrapped by a <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">frame</span> class.</p>
+<ul><li>Main working space
+<p>The main working space contains 3 elements. To be positioned centrally to the UI, each of them is wrapped by a <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">frame</span> class:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">pointer</span> ID that is responsible for showing the direction from which the presence of metal was recognized. This element can be rotated. The rotation angle depends on the current values of the magnetic sensor.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">border</span> ID that is responsible for the graphical presentation of the strength of the detected magnetic field. In fact the <span style="font-family: Courier New,Courier,monospace">pointer div</span> element is covered by a <span style="font-family: Courier New,Courier,monospace">border</span> element with variable thickness of the border that depends on the current values of the magnetic sensor. The greater the value, the thinner the border.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">info</span> ID is responsible for displaying the calculated value of the strength of the detected magnetic field.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">pointer</span> ID is responsible for showing the direction from which the presence of metal was recognized. This element can be rotated. The rotation angle depends on the current values of the magnetic sensor.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">border</span> ID is responsible for the graphical presentation of the strength of the detected magnetic field. In fact, the <span style="font-family: Courier New,Courier,monospace">pointer div</span> element is covered by a <span style="font-family: Courier New,Courier,monospace">border</span> element with a variable thickness of the border that depends on the current values of the magnetic sensor. The greater the value, the thinner the border.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">info</span> ID is responsible for displaying the calculated value of the strength of the detected magnetic field.</li>
</ul>
<pre class="prettyprint">
<!--index.html-->
</div>
</section>
</div>
-</pre>
-
-<h4>Defining the Error Popup</h4>
+</pre></li>
+<li>Error popup
-<p>The following code snippet shows the arrangement of the elements of the error popup.</p>
+<p>The error popup is defined according to the TAU library popup template. It contains an error message in the content area and an <strong>OK</strong> button in the footer:</p>
<pre class="prettyprint">
<!--index.html-->
<div class="ui-page">
</div>
</pre>
-<p>The alert popup is defined according to the TAU library popup template. The following figure shows the popup with an example error message.</p>
-
- <p class="figure">Figure: MetalDetector error</p>
- <p align="center"><img alt="MetalDetector error" src="../images/metaldetector_error_ww.png" /> </p>
-
-<p>This popup can be displayed at application start when the magnetic sensor is not supported on the device, or when an error occurs after the magnetic sensor has started. The application closes automatically when the <strong>OK</strong> button is pressed.</p>
+<p>The popup can be displayed at the application start if the magnetic sensor is not supported on the device, or when an error occurs after the magnetic sensor has started. The application closes automatically when the <strong>OK</strong> button is pressed.</p></li></ul>
<h3>Accessing Sensor Data</h3>
-<p>The MetalDetector application uses the magnetic sensor to indicate the value and the direction of the measured magnetic field. Access to the data from the magnetic sensor is essential for proper application operation.</p>
+<p>The MetalDetector application uses the magnetic sensor to indicate the value and direction of the measured magnetic field. Access to the data from the magnetic sensor is essential for proper application operation.</p>
<p>To access the sensor data:</p>
<ol>
}
</pre>
-<p>The application tries to access the SensorService. The <span style="font-family: Courier New,Courier,monospace">sensorService</span> interface provides methods to access the different types of sensors supported by device. If the SensorService is available, the application calls the <span style="font-family: Courier New,Courier,monospace">getDefaultSensor()</span> method with the <span style="font-family: Courier New,Courier,monospace">MAGNETIC</span> string as a parameter. In case of failure, the application fires the <span style="font-family: Courier New,Courier,monospace">not.supported</span> event and shows the alert popup (mentioned in previous chapter). If successful, the application gains access to the <span style="font-family: Courier New,Courier,monospace">Sensor</span> object from Sensor API and calls the <span style="font-family: Courier New,Courier,monospace">startSensor()</span> method on it to obtain the value that is currently returned by the magnetic sensor.</p>
+<p>The application tries to access the sensor service. The <span style="font-family: Courier New,Courier,monospace">sensorService</span> interface provides methods to access the different types of sensors supported by device. If the sensor service is available, the application calls the <span style="font-family: Courier New,Courier,monospace">getDefaultSensor()</span> method with the <span style="font-family: Courier New,Courier,monospace">MAGNETIC</span> string as a parameter. In case of failure, the application fires the <span style="font-family: Courier New,Courier,monospace">not.supported</span> event and shows the error popup. If successful, the application gains access to the <span style="font-family: Courier New,Courier,monospace">Sensor</span> object from Sensor API and calls the <span style="font-family: Courier New,Courier,monospace">startSensor()</span> method on it to obtain the value that is currently returned by the magnetic sensor.</p>
</li>
<li>Start the application.
<p>The <span style="font-family: Courier New,Courier,monospace">start()</span> method from the Sensor API takes 2 parameters:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">onSensorStartSuccess()</span> success callback which sets the <span style="font-family: Courier New,Courier,monospace">isSensorStarted</span> flag value to true and sets magnetic sensor change listener. As a result after each sensor value change the <span style="font-family: Courier New,Courier,monospace">onGetSuccess()</span> method is called and the <span style="font-family: Courier New,Courier,monospace">model.magnetic.update</span> event is fired. This event delivers the current sensor data and is listened by the main view module to update the UI.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onSensorStartSuccess()</span> success callback sets the <span style="font-family: Courier New,Courier,monospace">isSensorStarted</span> flag value to <span style="font-family: Courier New,Courier,monospace">true</span> and registers the magnetic sensor change listener. As a result, after each sensor value change, the <span style="font-family: Courier New,Courier,monospace">onGetSuccess()</span> method is called and the <span style="font-family: Courier New,Courier,monospace">model.magnetic.update</span> event is fired. This event delivers the current sensor data and is listened to by the main view module to update the UI.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">onSensorStartError()</span> error callback which sets the <span style="font-family: Courier New,Courier,monospace">isSensorStarted</span> flag value to false and fires the <span style="font-family: Courier New,Courier,monospace">model.magnetic.error</span> event. This event is listened by the main view module to display the error popup if necessary.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onSensorStartError()</span> error callback sets the <span style="font-family: Courier New,Courier,monospace">isSensorStarted</span> flag value to <span style="font-family: Courier New,Courier,monospace">false</span> and fires the <span style="font-family: Courier New,Courier,monospace">model.magnetic.error</span> event. This event is listened to by the main view module to display the error popup, if necessary.</li>
</ul>
<pre class="prettyprint">
/* js/models/magnetic.js */
</pre>
</li>
<li>Update the magnetic event information.
-<p>When the <span style="font-family: Courier New,Courier,monospace">model.magnetic.update</span> event occurs, the <span style="font-family: Courier New,Courier,monospace">onMagneticUpdate()</span> method form the main view module is called.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">model.magnetic.update</span> event occurs, the <span style="font-family: Courier New,Courier,monospace">onMagneticUpdate()</span> method from the main view module is called.</p>
<pre class="prettyprint">
/* js/views/main.js */
function onMagneticUpdate(event)
</pre>
</li>
<li>Obtain the vector values.
-<p>Obtain 3 vectors of the magnetic sensor value. The application uses the <span style="font-family: Courier New,Courier,monospace">count3dVectorLength()</span> method form the <span style="font-family: Courier New,Courier,monospace">js/helpers/calculations.js</span> module to calculate the result vector.</p>
+<p>Obtain 3 vectors of the magnetic sensor value. The application uses the <span style="font-family: Courier New,Courier,monospace">count3dVectorLength()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/helpers/calculations.js</span> module to calculate the result vector.</p>
<pre class="prettyprint">
/* js/views/main.js */
function count3dVectorLength(x, y, z)
}
</pre>
-<p>This method bases on coordinates of the 3 given 3D vectors and calculates the vector with the result length. The calculated value is used by other methods to update the UI.</p>
+<p>This method is based on the coordinates of the 3 given 3D vectors and calculates the vector with the result length. The calculated value is used by other methods to update the UI.</p>
<p>The <span style="font-family: Courier New,Courier,monospace">setValue()</span> method takes the value calculated by the <span style="font-family: Courier New,Courier,monospace">count3dVectorLength()</span> method and simply updates the <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">info</span> ID.</p>
<pre class="prettyprint">
</pre>
</li>
<li>Calculate the result.
-<p>The <span style="font-family: Courier New,Courier,monospace">setPointerRotation()</span> method takes the coordinates of the 2 vectors (<span style="font-family: Courier New,Courier,monospace">x</span> and <span style="font-family: Courier New,Courier,monospace">y</span>) and uses the <span style="font-family: Courier New,Courier,monospace">Math.atan2()</span> method to calculate the angle in radians between the given point (<span style="font-family: Courier New,Courier,monospace">x, y</span>) and the positive OX axis. The calculated value is used to set the webkit-transform CSS attribute what allows to rotate the <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">pointer</span> ID.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">setPointerRotation()</span> method takes the coordinates of the 2 vectors (<span style="font-family: Courier New,Courier,monospace">x</span> and <span style="font-family: Courier New,Courier,monospace">y</span>) and uses the <span style="font-family: Courier New,Courier,monospace">Math.atan2()</span> method to calculate the angle in radians between the given point (<span style="font-family: Courier New,Courier,monospace">x, y</span>) and the positive OX axis. The calculated value is used to set the webkit-transform CSS attribute that allows you to rotate the <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">pointer</span> ID.</p>
<pre class="prettyprint">
/* js/views/main.js */
var pointer = null;
}
</pre>
-<p>This method is based on 3 constant values. The <span style="font-family: Courier New,Courier,monospace">LOWER_THRESHOLD</span> and <span style="font-family: Courier New,Courier,monospace">UPPER_THRESHOLD</span> constant values determine the working range for the border element.</p>
+<p>This method is based on 3 constant values. The <span style="font-family: Courier New,Courier,monospace">LOWER_THRESHOLD</span> and <span style="font-family: Courier New,Courier,monospace">UPPER_THRESHOLD</span> constant values determine the working range for the border element:</p>
<ul>
<li><p>When the given value is lower than the <span style="font-family: Courier New,Courier,monospace">LOWER_THRESHOLD</span>, the border width of the border element is the biggest to cover the maximum area of the pointer element (and make it almost invisible). The application uses the <span style="font-family: Courier New,Courier,monospace">MIN_POINTER_THICKNESS</span> constant value to ensure a minimum of the pointer element visibility.</p></li>
</ul>
</td>
</tr>
+ <tr>
+ <td><a href="filemanager_ww.htm">FileManager</a></td>
+ <td>Demonstrates how you can read and modify the content of the device file system using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem</a> API</li>
+ </ul>
+ </td>
+</tr>
<tr>
<td><a href="heartratemonitor_ww.htm">HeartRateMonitor</a></td>
<td>Demonstrates how you can measure the device user's current heart rate using:
<topic href="html/wearable_w/compass_ww.htm" label="Compass"></topic>
<topic href="html/wearable_w/demo3d_ww.htm" label="Demo3D"></topic>
<topic href="html/wearable_w/digitalwatch_ww.htm" label="DigitalWatch"></topic>
+ <topic href="html/wearable_w/filemanager_ww.htm" label="FileManager"></topic>
<topic href="html/wearable_w/heartratemonitor_ww.htm" label="HeartRateMonitor"></topic>
<topic href="html/wearable_w/hellotizen_ww.htm" label="HelloTizen"></topic>
<topic href="html/wearable_w/minigallery_ww.htm" label="MiniGallery"></topic>
<topic href="html/mobile_n/alarm_sd_mn.htm" label="Alarm"></topic>
<topic href="html/mobile_n/appcommon_sd_mn.htm" label="Application Common"></topic>
<topic href="html/mobile_n/application_control_sd_mn.htm" label="Application Control"></topic>
+ <topic href="html/mobile_n/attach_panel_sd_mn.htm" label="Attach Panel"></topic>
<topic href="html/mobile_n/badge_sd_mn.htm" label="Badge"></topic>
<topic href="html/mobile_n/bluetoothchat_sd_mn.htm" label="Bluetooth Chat"></topic>
<topic href="html/mobile_n/bundle_sd_mn.htm" label="Bundle"></topic>
<topic href="html/mobile_n/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/resource_manager_sd_mn.htm" label="Resource Manager"></topic>
+ <topic href="html/mobile_n/resource_management_sd_mn.htm" label="Resource Management"></topic>
<topic href="html/mobile_n/sample_account_sd_mn.htm" label="Sample Account"></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/wearable_n/rectsettings_sd_wn.htm" label="(Rectangle) Settings"></topic>
<topic href="html/wearable_n/rectuidialer_sd_wn.htm" label="(Rectangle) UI Dialer"></topic>
<topic href="html/wearable_n/rectwidgetviewer_sd_wn.htm" label="(Rectangle) Widget Viewer"></topic>
+ <topic href="html/wearable_n/ambientweather_sd_wn.htm" label="Ambient Weather"></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>
app_control_h app_control = NULL;
ret = app_control_create(&app_control);
ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
- ret = app_control_set_app_id (app_control, "org.tizen.alarmslave");
+ ret = app_control_set_app_id(app_control, "org.tizen.alarmslave");
</pre>
</li>
<pre class="prettyprint">
ret = app_control_create(&app);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_create() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_create() failed. err = %d", ret);
</pre>
</li>
<li>
<pre class="prettyprint">
ret = app_control_set_operation(app, APP_CONTROL_OPERATION_VIEW);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_operation() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_operation() failed. err = %d", ret);
ret = app_control_set_mime(app, "image/jpeg");
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_mime() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_mime() failed. err = %d", ret);
</pre>
<p>For more information on the common application services and the extra data related to them, see <a href="../../../../org.tizen.guides/html/native/app/common_appcontrol_n.htm">Common Application Controls</a>.</p>
<pre class="prettyprint">
ret = app_control_add_extra_data(app, Your Message Key, message);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_add_extra_data() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_add_extra_data() failed. err = %d", ret);
</pre>
</li>
<li>
<pre class="prettyprint">
ret = app_control_send_launch_request(app, NULL, NULL);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_send_launch_request() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_send_launch_request() failed. err = %d", ret);
</pre>
<table class="note">
<tbody>
ret = app_control_get_extra_data(app, key, &value);
if (ret != APP_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_get_extra_data() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_get_extra_data() failed. err = %d", ret);
}
dlog_print(DLOG_DEBUG, LOG_TAG, "[value] %s", value);
ret = app_control_foreach_extra_data(app, _app_control_extra_data_cb, 0);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_foreach_extra_data() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_foreach_extra_data() failed. err = %d", ret);
</pre>
</li>
<pre class="prettyprint">
ret = app_control_destroy(app);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_destroy() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_destroy() failed. err = %d", ret);
</pre>
</li>
</ol>
{
if (!g_hash_table_remove(map_repository_test, key))
{
- dlog_print(DLOG_ERROR, LOG_TAG, "remove value fail -%s", key);
+ dlog_print(DLOG_ERROR, LOG_TAG, "remove value failed -%s", key);
return;
}
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The get operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The get operation for the request %d failed. error message: %s",
request_id, error);
}
}
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The set operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The set operation for the request %d failed. error message: %s",
request_id, error);
}
}
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The add operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The add operation for the request %d failed. error message: %s",
request_id, error);
}
}
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The remove operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The remove operation for the request %d failed. error message: %s",
request_id, error);
}
}
ret = data_control_map_create(&(ad->provider_h));
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "creating data control provider is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "creating data control provider failed with error: %d", ret);
}
ret = data_control_map_set_provider_id(ad->provider_h, provider_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "setting provider id is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting provider id failed with error: %d", ret);
}
ret = data_control_map_set_data_id(ad->provider_h, data_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "setting data id is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting data id failed with error: %d", ret);
}
// Set response callback
ret = data_control_map_register_response_cb(ad->provider_h, &map_callback, NULL);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "Registering the callback function is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "Registering the callback function failed with error: %d", ret);
if (ret == DATA_CONTROL_ERROR_IO_ERROR)
{
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The delete operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The delete operation for the request %d failed. error message: %s",
request_id, error);
}
}
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The insert operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The insert operation for the request %d failed. error message: %s",
request_id, error);
}
}
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The select operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The select operation for the request %d failed. error message: %s",
request_id, error);
}
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The update operation for the request %d is failed. error message: %s",
+ dlog_print(DLOG_ERROR, LOG_TAG, "The update operation for the request %d failed. error message: %s",
request_id, error);
}
}
ret = data_control_sql_create(&(ad->provider_h));
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "creating data control provider is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "creating data control provider failed with error: %d", ret);
}
ret = data_control_sql_set_provider_id(ad->provider_h, provider_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "setting provider id is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting provider id failed with error: %d", ret);
}
ret = data_control_sql_set_data_id(ad->provider_h, data_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "setting data id is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting data id failed with error: %d", ret);
}
sql_callback.delete_cb = sql_delete_response_cb;
ret = data_control_sql_register_response_cb(ad->provider_h, &sql_callback, NULL);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "Registering the callback function is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "Registering the callback function failed with error: %d", ret);
}
dlog_print(DLOG_INFO, LOG_TAG, "Init data control success");
int ret = watch_app_main(argc, argv, &callback, &ad);
if (ret != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() failed. err = %d", ret);
}
return ret;
// Register a callback for each system event
if (watch_app_add_event_handler(&handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed, NULL) != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
}
if (watch_app_add_event_handler(&handler, APP_EVENT_REGION_FORMAT_CHANGED, region_changed, NULL) != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
}
if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_BATTERY, low_battery, NULL) != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
}
if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_MEMORY, low_ memory, NULL) != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
}
return true;
int ret = watch_app_main(argc, argv, &callback, &ad);
if (ret != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() failed. err = %d", ret);
}
return ret;
}
static void
-btn_reset_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+btn_reset_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
ad->slx_value = elm_slider_value_get(ad->slx);
}
static void
-btn_reset_cb(void *data, Evas_Object *obj, void *event_info)
+btn_reset_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
ad->slx_value = elm_slider_value_get(ad->slx);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *) (&rots), 4);
}
int
main(int argc, char *argv[])
{
- appdata_s ad = { 0, };
+ appdata_s ad = {0,};
int ret = 0;
- ui_app_lifecycle_callback_s event_callback = { 0, };
+ ui_app_lifecycle_callback_s event_callback = {0,};
event_callback.create = app_create;
event_callback.terminate = app_terminate;
if (tbm_surface_map(surface, TBM_SURF_OPTION_READ|TBM_SURF_OPTION_WRITE, &surface_info) != TBM_SURFACE_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "Fail to map tbm_surface\n");
+ dlog_print(DLOG_ERROR, LOG_TAG, "Failed to map tbm_surface\n");
}
</pre>
</li>
}
else
{
- print("media_format_get_video is failed...");
+ print("media_format_get_video failed...");
}
</pre>
ret = scmirroring_sink_create(&g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_create fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_create failed [%d]", ret);
return FALSE;
}
ret = scmirroring_sink_set_state_changed_cb(g_scmirroring, scmirroring_state_callback, NULL);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_state_changed_cb fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_state_changed_cb failed [%d]", ret);
return FALSE;
}
if (ret != SCMIRRORING_ERROR_NONE)
{
dlog_print(DLOG_ERROR, LOG_TAG,
- "scmirroring_sink_set_display fail [%d], display type [%d]",
+ "scmirroring_sink_set_display failed [%d], display type [%d]",
ret, display_type);
return FALSE;
if (ret != SCMIRRORING_ERROR_NONE)
{
dlog_print(DLOG_ERROR, LOG_TAG,
- "scmirroring_sink_set_display fail [%d], display type [%d]",
+ "scmirroring_sink_set_display failed [%d], display type [%d]",
ret, display_type);
return FALSE;
ret = scmirroring_sink_prepare(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_prepare fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_prepare failed [%d]", ret);
return FALSE;
}
ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_ip_and_port fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_ip_and_port failed [%d]", ret);
return FALSE;
}
ret = scmirroring_sink_connect(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_connect fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_connect failed [%d]", ret);
return FALSE;
}
ret = scmirroring_sink_start(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_start fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_start failed [%d]", ret);
return;
}
ret = scmirroring_sink_disconnect(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_disconnect fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_disconnect failed [%d]", ret);
return FALSE;
}
ret = scmirroring_sink_unprepare(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_unprepare fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_unprepare failed [%d]", ret);
return FALSE;
}
ret = scmirroring_sink_destroy(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_destroy fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_destroy failed [%d]", ret);
return FALSE;
}
ret = destroy_scmirroring_sink();
if (ret != TRUE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "destroy_scmirroring_sink fail");
+ dlog_print(DLOG_ERROR, LOG_TAG, "destroy_scmirroring_sink failed");
return;
}
ret = scmirroring_sink_unprepare(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_unprepare fail [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_unprepare failed [%d]", ret);
return;
}
static void
_sound_manager_volume_changed_cb(sound_type_e type, unsigned int volume, void* user_data)
{
- char buf[MBUF] = {0, };
+ char buf[MBUF] = {0,};
snprintf(buf, MBUF, "(%d) type volume changed to (%d)", type, volume);
dlog_print(DLOG_INFO, "Sound Manager", "Volume Changed : %s", buf);
<ul class="toc">
<li><a href="#pre_gatt">Handling GATT Operation Preconditions</a></li>
<li><a href="#gatt">Managing the GATT Client Operations</a></li>
- <li><a href="#gatt_getter">Managing Common Getter GATT Operations</a></li>
- <li><a href="#gatt_setter">Managing Common Setter GATT Operations</a></li>
+ <li><a href="#gatt_getter">Managing Common GATT Getter Operations</a></li>
+ <li><a href="#gatt_setter">Managing Common GATT Setter Operations</a></li>
</ul>
</li>
<li>Object Push Profile (OPP) operations
<p>Connect to the BLE target before using the GATT APIs.</p></li>
<li><a href="#gatt">Managing the GATT Client Operations</a>
<p>Create a GATT 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 GATT Operations</a>
- <p>Get information used commonly in client GATT operations.</p></li>
- <li><a href="#gatt_setter">Managing Common Setter GATT Operations</a>
+ <li><a href="#gatt_getter">Managing Common GATT Getter Operations</a>
+ <p>Get information used commonly in GATT client operations.</p></li>
+ <li><a href="#gatt_setter">Managing Common GATT Setter Operations</a>
<p>Set the properties and values of GATT attributes.</p></li>
</ul></li>
<li>Object Push Profile (OPP) operations
ret = bt_initialize();
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_initialize] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_initialize] failed.");
return;
}
<p>To allow the user to enable or disable Bluetooth, use the application control to display the Bluetooth activation settings.</p>
<p>The Bluetooth API does not contain functions for enabling or disabling Bluetooth. You must display the Bluetooth activation settings application to allow the user to toggle the Bluetooth state.</p>
-
-<p>No Bluetooth API is provided to enable or disable Bluetooth. Use the Bluetooth ON/OFF application illustrated in the following figure (off screen on the left and on screen on the right).</p>
<p class="figure">Figure: Bluetooth activation settings application (off screen on the left and on screen on the right)</p>
<p align="center"><img alt="Bluetooth activation settings application (off screen on the left and on screen on the right)" src="../../images/bluetooth_onoff.png" /></p>
ret = bt_adapter_get_state(&adapter_state);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_get_state] Failed");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_get_state] failed");
return;
}
{
if (result != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[adapter_state_changed_cb] Failed! result=%d", result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[adapter_state_changed_cb] failed! result=%d", result);
return;
}
ret = bt_adapter_set_state_changed_cb(adapter_state_changed_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_state_changed_cb()] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_state_changed_cb()] failed.");
}
</pre></li>
</ol>
<h2 id="find" name="find">Finding Other Devices</h2>
-<p>To find remote Bluetooth devices either through device discovery or querying bonded devices:</p>
+<p>To find remote Bluetooth devices, you can either discover them and bond with them, or you can query the list of previously bonded devices:</p>
<ul>
-<li>Define and register the discovery state callback function.
+<li>Discover and bond with new devices:
<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>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);
-
-// Bluetooth LE
-int bt_adapter_le_start_device_discovery(void);
-int bt_adapter_le_stop_device_discovery(void);
-</pre>
- </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>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> 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>The following example shows the implementation for classic Bluetooth. Bluetooth LE usage is the same.</p>
-<pre class="prettyprint">#include <glib.h> // For GList
+<li>Define and register the discovery state change callback.
+<p>Register the callback with the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_set_device_discovery_state_changed_cb()</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_set_device_discovery_state_changed_cb()</span> (Bluetooth LE) function.</p>
+<p>Use the callback to manage the discovery process:</p>
+<ul><li><p>The first callback parameter defines the result of the Bluetooth discovery process. In case of success, the parameter value is <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_NONE</span>. If the discovery failed to start due to an error, the parameter value is <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_TIMEOUT</span>.</p></li>
+<li><p>The second callback parameter defined the current state of the discovery process using the enumerators <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> applications):</p>
+<ul><li>When you start the discovery process, the callback is triggered with the <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> state.
+<p>Similarly, when you stop the discovery process, the callback is triggered with the <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></li>
+<li>Each time a remote Bluetooth device is found, the callback is triggered with 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>In this state, you can get some information about the discovered device, such as the device MAC address, name, class, RSSI (received signal strength indicator), and bonding state. Using this information, you can bond with the discovered device.</p></li></ul></li></ul>
+
+<p>The following example shows the callback implementation for classic Bluetooth. Bluetooth LE is implemented in the same way.</p>
+<pre class="prettyprint">
+#include <glib.h> // 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)
{
if (result != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[adapter_device_discovery_state_changed_cb] Failed! result(%d).", result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[adapter_device_discovery_state_changed_cb] failed! result(%d).", result);
return;
}
}
break;
}
-}</pre>
-</li>
-<li>
-<p>Register the callback for classic Bluetooth. Bluetooth LE usage is the same.</p>
-<pre class="prettyprint">GList *devices_list = NULL;
+}
+
+GList *devices_list = NULL;
ret = bt_adapter_set_device_discovery_state_changed_cb(adapter_device_discovery_state_changed_cb,
(void*)&devices_list);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_device_discovery_state_changed_cb] Failed.");
-}</pre>
-</li>
-</ol>
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_device_discovery_state_changed_cb] failed.");
+}
+</pre>
</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>
+<li>Start the discovery process:
<pre class="prettyprint">
// Classic Bluetooth
ret = bt_adapter_start_device_discovery();
+
+// Bluetooth LE
+int bt_adapter_le_start_device_discovery(void);
+
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_device_discovery] Failed.");
-}</pre>
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_device_discovery] failed.");
+}
+</pre>
+<p>You can discover a nearby remote Bluetooth device, if the remote device Bluetooth is enabled and in a discovery mode.</p>
+<p>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>
</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>
+<p>To bond with a discovered remote device, use the <span style="font-family: Courier New,Courier,monospace;">bt_device_create_bond()</span> function. To cancel the bonding, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_cancel_bonding()</span> function.</p>
+
<pre class="prettyprint">
-// Visibility mode of the Bluetooth device
-bt_adapter_visibility_mode_e mode;
-// Duration until the visibility mode is changed so that other devices cannot find your device
-int duration = 1;
-bt_adapter_get_visibility(&mode, &duration);
-if (mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The device is not discoverable.");
-}
-else if (mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
+ret = bt_device_create_bond(bt_server_address);
+if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "The device is discoverable. No time limit.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_create_bond] failed.");
+
+ return;
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG, "The device is discoverable for a set period of time.");
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_device_create_bond] succeeded. device_bond_created_cb callback will be called.");
}</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>
-
-<pre class="prettyprint">
-#include <app_control.h>
-#include <dlog.h>
-
-int
-bt_set_visibility_operation(void)
-{
- int ret = 0;
- app_control_h service = NULL;
- app_control_create(&service);
- if (service == NULL)
- {
- dlog_print(DLOG_INFO, LOG_TAG, "service_create failed!\n");
-
- return 0;
- }
- app_control_set_operation(service, "APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY");
- ret = app_control_send_launch_request(service, NULL, NULL);
-
- app_control_destroy(service);
- if (ret == APP_CONTROL_ERROR_NONE)
- {
- dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to Bluetooth On/Off app!\n");
-
- return 0;
- }
- else
- {
- dlog_print(DLOG_INFO, LOG_TAG, "Failed to relaunch Bluetooth On/Off app!\n");
- return -1;
- }
+<p>To get notified when the bonding process has finished, register a bond created callback using the <span style="font-family: Courier New,Courier,monospace;">bt_device_set_bond_created_cb()</span> function. From the callback, you can get the service UUID and the list of services provided by the remote Bluetooth device.</p>
- return 0;
-}</pre>
-</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)
+device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
{
if (result != BT_ERROR_NONE)
{
- // Error handling
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_bond_created_cb] failed. result(%d).", result);
+
return;
}
- if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
- {
- dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] None discoverable mode!");
- }
- else if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
+
+ if (device_info != NULL && !strcmp(device_info->remote_address, remote_server_address))
{
- dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] General discoverable mode!");
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: A bond with chat_server is created.");
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: The number of service - %d.", device_info->service_count);
+ int i = 0;
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_bonded - %d.", device_info->is_bonded);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_connected - %d.", device_info->is_connected);
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] Limited discoverable mode!");
+ dlog_print(DLOG_ERROR, LOG_TAG, "Callback: A bond with another device is created.");
}
-}</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);
+}
+
+// You can get bt_server_address from bt_adapter_bonded_device_cb() or bt_device_service_searched_cb()
+// device_info->remote_address in bt_adapter_bonded_device_cb()
+// sdp_info->remote_address in bt_device_service_searched_cb()
+
+ret = bt_device_set_bond_created_cb(device_bond_created_cb, bt_server_address);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_visibility_mode_changed_cb] Failed.");
-}</pre>
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_set_bond_created_cb] failed.");
+
+ return;
+}
+</pre>
+
+<p>After you have successfully bonded with a remote device, it is included in the bonded device list. When you want to connect to that device again in the future, you do not need to discover it again. Instead, you can simply query the bonded device list to receive the information (such as address and name) you need to connect to the device. You can also query the bonded device list to verify that the bonding was successful.</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>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 example describes how to query bonded devices and how to discover a desired device.</p>
+<li>Query the bonded device list.
+<p>To query the list of previously bonded devices, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function. The function triggers a callback for each bonded device, and the callback provides you information about the bonded device (such as name, MAC address, and service list) that you need to connect to the device.</p>
+<p>Make sure that the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span> until you have found the device you want. When the callback returns <span style="font-family: Courier New,Courier,monospace;">false</span>, the iterations stop and no more callbacks are called even if there are more devices in the bonded list.</p>
<pre class="prettyprint">// Server address for connecting
char *bt_server_address = NULL;
const char *remote_server_name = "server device";
}
if (!strcmp(device_info->remote_name, (char*)user_data))
{
- dlog_print(DLOG_INFO, LOG_TAG, "The server device is found in bonded device list. address(%s)", device_info->remote_address);
+ dlog_print(DLOG_INFO, LOG_TAG, "The server device is found in bonded device list. address(%s)",
+ device_info->remote_address);
bt_server_address = strdup(device_info->remote_address);
// If you want to stop iterating, you can return "false"
}
ret = bt_adapter_foreach_bonded_device(adapter_bonded_device_cb, remote_server_name);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_foreach_bonded_device] Failed!");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_foreach_bonded_device] failed!");
}
if (bt_server_address != NULL)
free(bt_server_address);
</pre>
-</li>
-</ol>
-</li>
+<p>To remove a device from the bonded list, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_destroy_bond()</span> function.</p>
+</li></ul>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">A Bluetooth device must be in a discovery mode (visible) for other devices to find it and connect to it. If you want other devices to find your device, you must set the device to be visible.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>To manage the device visibility and enable discovery:</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 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>
+<p>Check the current visibility of your device:</p>
+<pre class="prettyprint">
+// Visibility mode of the Bluetooth device
+bt_adapter_visibility_mode_e mode;
+// Duration until the visibility mode is changed so that other devices cannot find your device
+int duration = 1;
+bt_adapter_get_visibility(&mode, &duration);
+if (mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The device is not discoverable.");
+}
+else if (mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The device is discoverable. No time limit.");
+}
+else
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The device is discoverable for a set period of time.");
+}
+</pre>
+</li>
+<li>
+<p>To allow the user to change the visibility mode of the device, use the application control to display the Bluetooth visibility setting application.</p>
+<p>The Bluetooth API does not contain functions for changing the visibility. You must display the Bluetooth visibility setting application to allow the user to toggle the visibility state.</p>
+<p align="center"><img alt="Bluetooth visibility setting application" src="../../images/bluetooth_visibility.png" /></p>
+
+<pre class="prettyprint">
+#include <app_control.h>
+#include <dlog.h>
+
+int
+bt_set_visibility_operation(void)
+{
+ int ret = 0;
+ app_control_h service = NULL;
+ app_control_create(&service);
+ if (service == NULL)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "service_create failed!\n");
+
+ return 0;
+ }
+ app_control_set_operation(service, "APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY");
+ ret = app_control_send_launch_request(service, NULL, NULL);
+
+ app_control_destroy(service);
+ if (ret == APP_CONTROL_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to Bluetooth On/Off app!\n");
+
+ return 0;
+ }
+ else
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to relaunch Bluetooth On/Off app!\n");
+
+ return -1;
+ }
+
+ return 0;
+}
+</pre>
+</li>
+<li>
+<p>To get a notification when the visibility mode changes, define and register a visibility mode change callback:</p>
<pre class="prettyprint">
void
-device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
+adapter_visibility_mode_changed_cb(int result, bt_adapter_visibility_mode_e visibility_mode, void* user_data)
{
if (result != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_bond_created_cb] Failed. result(%d).", result);
-
+ // Error handling
return;
}
-
- if (device_info != NULL && !strcmp(device_info->remote_address, remote_server_address))
+ if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: A bond with chat_server is created.");
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: The number of service - %d.", device_info->service_count);
- int i = 0;
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_bonded - %d.", device_info->is_bonded);
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_connected - %d.", device_info->is_connected);
+ dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] None discoverable mode!");
+ }
+ else if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] General discoverable mode!");
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "Callback: A bond with another device is created.");
+ dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] Limited discoverable mode!");
}
}
-// You can get bt_server_address from bt_adapter_bonded_device_cb() or bt_device_service_searched_cb()
-// device_info->remote_address in bt_adapter_bonded_device_cb()
-// sdp_info->remote_address in bt_device_service_searched_cb()
-
-ret = bt_device_set_bond_created_cb(device_bond_created_cb, bt_server_address);
+ret = bt_adapter_set_visibility_mode_changed_cb(adapter_visibility_mode_changed_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_set_bond_created_cb] failed.");
-
- return;
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_visibility_mode_changed_cb] failed.");
}
-
-ret = bt_device_create_bond(bt_server_address);
-if (ret != BT_ERROR_NONE)
-{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_create_bond] failed.");
-
- return;
-}
-else
-{
- dlog_print(DLOG_INFO, LOG_TAG, "[bt_device_create_bond] succeeded. device_bond_created_cb callback will be called.");
-}</pre>
-</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>
+</pre>
</li>
</ol>
-</li>
-</ul>
<h2 id="connect" name="connect">Connecting to Other Devices Using SPP</h2>
{
if (result != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[socket_connection_state_changed_cb] Failed. result =%d.", result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[socket_connection_state_changed_cb] failed. result =%d.", result);
return;
}
<li>Connect as a client:
<ol>
<li>Define and register the socket connection state change callback using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_set_connection_state_changed_cb()</span> function.
-<p>The callback in invoked whenever the connection state changes (for example, when you connect to the server device). </p>
+<p>The callback is invoked whenever the connection state changes (for example, when you connect to the server device). </p>
<pre class="prettyprint">
ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
if (ret != BT_ERROR_NONE)
<pre class="prettyprint">
const char *service_uuid="00001101-0000-1000-8000-00805F9B34FB";
-ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
-if (ret != BT_ERROR_NONE)
-{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_set_connection_state_changed_cb] failed.");
-
- return;
-}
-
ret = bt_socket_connect_rfcomm(bt_server_address, service_uuid);
if (ret != BT_ERROR_NONE)
{
ret = bt_socket_set_data_received_cb(bt_socket_data_received_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_data_received_cb] regist to fail.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_data_received_cb] regist failed.");
}
</pre>
ret = bt_socket_destroy_rfcomm(server_socket_fd);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_destroy_rfcomm] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_destroy_rfcomm] failed.");
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] Succeeded. socket_fd = %d", server_socket_fd);
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] succeeded. socket_fd = %d", server_socket_fd);
}
</pre></li>
ret = bt_socket_disconnect_rfcomm(server_socket_fd);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_destroy_rfcomm] Failed. server_socket_fd = %d.", server_socket_fd);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_destroy_rfcomm] failed. server_socket_fd = %d.", server_socket_fd);
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] Succeeded. server_socket_fd = %d.", server_socket_fd);
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] succeeded. server_socket_fd = %d.", server_socket_fd);
}
</pre></li></ul>
ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] failed.");
}
// Wait while the system searches for the LE target you want to connect to
// If you find the LE target you want, stop the scan
ret = bt_gatt_client_foreach_services(client, __bt_gatt_client_foreach_svc_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "fail");
+ dlog_print(DLOG_INFO, LOG_TAG, "failed");
}
return;
__bt_gatt_client_foreach_chr_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_foreach_characteristics is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_foreach_characteristics failed : %d", ret);
}
return true;
ret = bt_gatt_characteristic_foreach_descriptors(chr_handle,
__bt_gatt_client_foreach_desc_cb, NULL);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_foreach_descriptors is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_foreach_descriptors failed : %d", ret);
return true;
}
ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed : %d", ret);
return;
}
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed : %d", ret);
return;
}
ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor failed : %d", ret);
return;
}
ret = bt_gatt_client_read_value(desc, __bt_gatt_client_read_complete_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_read_value is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_read_value failed : %d", ret);
return;
}
ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed : %d", ret);
return;
}
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed : %d", ret);
return;
}
ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor failed : %d", ret);
return;
}
ret = __bt_gatt_client_set_value("int32", "1234", desc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_set_value is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_set_value failed : %d", ret);
return;
}
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_write_value is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_write_value failed : %d", ret);
return;
}
ret = bt_gatt_set_value(h, buf, len);
if (ret != BT_ERROR_NONE)
- TC_PRT("bt_gatt_set_value is failed : %d", ret);
+ TC_PRT("bt_gatt_set_value failed : %d", ret);
return ret;
}
ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed : %d", ret);
return;
}
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed : %d", ret);
return;
}
ret = bt_gatt_client_set_characteristic_value_changed_cb(chr, __bt_gatt_client_value_changed_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_set_characteristic_value_changed_cb is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_set_characteristic_value_changed_cb failed : %d", ret);
return;
}
ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed : %d", ret);
return;
}
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed : %d", ret);
return;
}
ret = bt_gatt_client_unset_characteristic_value_changed_cb(chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_unset_characteristic_value_changed_cb is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_unset_characteristic_value_changed_cb failed : %d", ret);
return;
}
ret = bt_gatt_get_type(gatt_handle, &gatt_type);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_type is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_type failed : %d", ret);
}
</pre></li>
ret = bt_gatt_get_uuid(gatt_handle, &uuid);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_uuid is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_uuid failed : %d", ret);
}
</pre></li>
ret = bt_gatt_get_value(gatt_handle, &value, &len);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_value is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_value failed : %d", ret);
}
</pre></li>
ret = bt_gatt_get_int_value(gatt_handle, type, offset, &value);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_int_value is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_int_value failed : %d", ret);
}
</pre></li>
ret = bt_gatt_get_float_value(gatt_handle, type, offset, &value);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_float_value is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_float_value failed : %d", ret);
}
</pre></li>
ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed : %d", ret);
}
</pre></li>
ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed : %d", ret);
break;
}
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed : %d", ret);
}
</pre></li>
ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed : %d", ret);
break;
}
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed : %d", ret);
break;
}
ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor failed : %d", ret);
}
</pre></li>
ret = bt_gatt_characteristic_get_properties(chr, &properties);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_properties is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_properties failed : %d", ret);
}
</pre></li>
ret = bt_gatt_characteristic_get_service(chr, &svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_service failed : %d", ret);
}
</pre></li>
ret = bt_gatt_descriptor_get_characteristic(dsc, &chr);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_descriptor_get_characteristic is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_descriptor_get_characteristic failed : %d", ret);
}
</pre></li>
ret = bt_gatt_service_get_client(svc, &client);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_client is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_client failed : %d", ret);
}
</pre></li>
ret = bt_gatt_characteristic_get_write_type(chr, &write_type);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_write_type is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_write_type failed : %d", ret);
}
</pre></li>
ret = bt_gatt_service_get_included_service(svc, uuid, &included_svc);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_included_service is failed : %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_included_service failed : %d", ret);
}
</pre></li>
ret = bt_opp_server_initialize_by_connection_request(directory, connection_requested_cb_for_opp_server, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_initialize_by_connection_request] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_initialize_by_connection_request] failed.");
}
free(directory);
</pre>
file_name, NULL, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_accept] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_accept] failed.");
}
ret = bt_opp_server_reject();
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_reject] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_reject] failed.");
}
</pre>
</li>
ret = bt_opp_client_initialize();
if (ret != BLUETOOTH_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_initialize() fail");
+ dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_initialize() failed");
return -1;
}
<pre class="prettyprint">
bt_error_e ret;
char *resource_path = NULL;
-char caller_id_path[1024] = {'\0', };
+char caller_id_path[1024] = {'\0',};
resource_path = app_get_resource_path();
snprintf(caller_id_path, sizeof(caller_id_path)-1, "%s/image1.jpg", resource_path);
if (ret != BLUETOOTH_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_add_file() fail");
+ dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_add_file() failed");
return -1;
}
__bt_opp_client_push_finished_cb, NULL);
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_client_push_files] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_client_push_files] failed.");
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG, "[bt_opp_client_push_files] Succeeded.");
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_opp_client_push_files] succeeded.");
}
</pre>
</li>
ret = bt_opp_client_clear_files();
if (ret != BLUETOOTH_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_clear_files() fail");
+ dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_clear_files() failed");
return -1;
}
if (ret != BLUETOOTH_ERROR_NONE)
{
ERR("bt_opp_client_initialize ");
- dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_initialize Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_initialize failed.");
return -1;
}
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] failed.");
}
return;
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_stop_scan] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_stop_scan] failed.");
}
return;
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_device_discovery] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_device_discovery] failed.");
}
// To unset the LE device discovery state change callback
ret = bt_adapter_le_unset_device_discovery_state_changed_cb();
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_destroy_advertiser] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_destroy_advertiser] failed.");
}
return;
ret = bt_deinitialize();
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_deinitialize] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_deinitialize] failed.");
}</pre>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</pre>
</li>
</ol>
- <h2 id="detail" name="detail">Getting the Network Connection Details</h2>
+ <h2 id="detail" name="detail">Getting Network Connection Details</h2>
<p>To get the type of the current connection, IP address, and proxy information:</p>
}
</pre></li></ol>
- <h2 id="info" name="info">Getting the Connection Information</h2>
+ <h2 id="info" name="info">Getting Connection Information</h2>
<p>To obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent or received data and last sent or received data (only cellular and Wi-Fi statistics information is supported):</p>
</pre></li>
<li>To get connection statistics, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_statistics()</span> function.
-<p>Connection statistics include the amount of total sent and received data and the last sent and received data. The function parameters determine which statistics are received, and for which connection type.</p>
+<p>Connection statistics include the amount of total sent and received data and the last sent and received data. The function parameters determine which statistics are received, and for which connection type:</p>
<ul>
<li>The second parameter defines the connection type using the <span style="font-family: Courier New,Courier,monospace;">connection_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">wearable</a> applications).</li>
rv = connection_get_current_profile(connection, &profile_h);
if (rv != CONNECTION_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to get profile handle %d\n", rv);
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to get profile handle %d\n", rv);
connection_destroy(connection);
return -1;
<p>To create a cloned message:</p>
<ol type="a">
<li>
-<p>Clone the message by calling the <span style="font-family: Courier New,Courier,monospace;">clone_message()</span> function.</p>
+<p>Clone the message by calling the <span style="font-family: Courier New,Courier,monospace;">clone_message()</span> function:</p>
<pre class="prettyprint">
static
nfc_ndef_message_h clone_message(nfc_ndef_message_h msg)
error_code = nfc_ndef_record_get_text(record, &text);
if (NFC_ERROR_NONE != error_code) // Error occurred
-// Gett he record text language code
+// Get the record text language code
error_code = nfc_ndef_record_get_langcode(record, &language);
if (NFC_ERROR_NONE != error_code) // Error occurred
<li>
<p>When the device is connected to a P2P target, you can exchange NDEF data with that peer target by sending and receiving messages.</p>
-<p>In the registered <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_target_discovered()</span> callback, check the value of the first parameter, which defines the type of the NFC discovery using the <span style="font-family: Courier New,Courier,monospace;">nfc_discovered_type_e</span> enumerator (in <a href="..
./../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications). If the type is <span style="font-family: Courier New,Courier,monospace;">NFC_DISCOVERED_TYPE_ATTACHED</span>, the remote device is attached to the device:</p>
+<p>In the registered <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_target_discovered()</span> callback, check the value of the first parameter, which defines the type of the NFC discovery using the <span style="font-family: Courier New,Courier,monospace;">nfc_discovered_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications). If the type is <span style="font-family: Courier New,Courier,monospace;">NFC_DISCOVERED_TYPE_ATTACHED</span>, the remote device is attached to the device:</p>
<pre class="prettyprint">
if (type == NFC_DISCOVERED_TYPE_ATTACHED)
{
</pre>
</li>
<li>
-<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) the size of aid, the parameter list (specified in ISO/IEC 8825-1), and the size of the parameter.</p>
+<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), the size of aid, the parameter list (specified in ISO/IEC 8825-1), and the size of the parameter.</p>
<pre class="prettyprint">
static void
on_nfc_se_transaction_event(nfc_se_type_e se_type, unsigned char *aid, int aid_size,
<li><p>Specify an <span style="font-family: Courier New,Courier,monospace;">AID</span> value for the application:</p>
<ol type="a">
<li>
-<p>To tell the platform which AID groups are requested by application, a metadata element must be included in the manifest file:</p>
+<p>To tell the platform which AID groups are requested by the application, a metadata element must be included in the manifest file:</p>
<pre class="prettyprint">
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1"
else
{
dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_se_is_activated_handler_for_aid is failed : %d", ret);
+ "nfc_se_is_activated_handler_for_aid failed : %d", ret);
}
ret = nfc_se_is_activated_handler_for_category(NFC_SE_TYPE_HCE,
else
{
dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_se_is_activated_handler_for_category is failed : %d", ret);
+ "nfc_se_is_activated_handler_for_category failed : %d", ret);
}
</pre></li>
<li>To register or unregister the AID at application runtime, use the <span style="font-family: Courier New,Courier,monospace;">nfc_se_register_aid()</span> and <span style="font-family: Courier New,Courier,monospace;">nfc_se_unregister_aid()</span> functions:
if (ret != NFC_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_register_aid is failed : %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_register_aid failed : %d", ret);
return false;
}
if (ret != NFC_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_unregister_aid is failed : %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_unregister_aid failed : %d", ret);
return false;
}
error_code = wifi_direct_connect(mac_address);
if (error_code != WIFI_DIRECT_ERROR_NONE)
{
- printf("Fail to connect\n");
+ printf("Failed to connect\n");
return -1;
}
error_code = wifi_direct_disconnect(mac_address);
if (error_code != WIFI_DIRECT_ERROR_NONE)
{
- printf("Fail to disconnect\n");
+ printf("Failed to disconnect\n");
return -1;
}
error_code = wifi_direct_create_group();
if (error_code != WIFI_DIRECT_ERROR_NONE)
{
- printf("Fail to create wifi direct group\n");
+ printf("Failed to create wifi direct group\n");
return -1;
}
error_code = wifi_direct_destroy_group();
if (error_code != WIFI_DIRECT_ERROR_NONE)
{
- printf("Fail to destroy wifi direct group\n");
+ printf("Failed to destroy wifi direct group\n");
return -1;
}
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to get Wi-Fi device state.");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to get Wi-Fi device state.");
}
</pre></li>
<li>
{
error_code = wifi_foreach_found_aps(__wifi_found_ap_cb, NULL);
if (error_code != WIFI_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to scan");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to scan");
}
</pre></li>
error_code = wifi_ap_get_essid(ap, &ap_name);
if (error_code != WIFI_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to get AP name.");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to get AP name.");
return false;
}
error_code = wifi_ap_get_connection_state(ap, &state);
if (error_code != WIFI_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to get state.");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to get state.");
return false;
}
error_code = wifi_foreach_found_aps(__found_connect_ap_cb, ap_name);
if (error_code != WIFI_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to connect (can't get AP list)");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to connect (can't get AP list)");
return -1;
}
error_code = wifi_ap_get_essid(ap, &ap_name);
if (error_code != WIFI_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to get AP name");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to get AP name");
return false;
}
if (wifi_ap_is_passphrase_required(ap, &required) == WIFI_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "Passphrase required: %s", required ? "True" : "False");
else
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to get Passphrase required");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to get Passphrase required");
if (required)
{
error_code = wifi_ap_set_passphrase(ap, passphrase);
if (error_code != WIFI_ERROR_NONE)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to set passphrase");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed to set passphrase");
return false;
}
error_code = wifi_connect(ap, __connected_cb, NULL);
if (error_code != WIFI_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "Fail to connection request");
+ dlog_print(DLOG_INFO, LOG_TAG, "Failed in connection request");
else
- dlog_print(DLOG_INFO, LOG_TAG, "Success to connection request");
+ dlog_print(DLOG_INFO, LOG_TAG, "Success in connection request");
free(ap_name);
</li>\r
<li><a href="#creatingkey">Creating Key Pairs</a></li>\r
<li><a href="#creatingsignat">Creating or Verifying Signatures</a></li>\r
- <li><a href="#verifying">Verifying or Getting a Certificate Chain</a></li>\r
+ <li><a href="#verifying">Verifying and Getting a Certificate Chain</a></li>\r
<li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a></li>\r
<li><a href="#access">Implementing Access Control</a></li>\r
</ul> \r
<li><a href="#creatingsignat">Creating or Verifying Signatures</a>\r
<p>Create or verify a signature on a given message.</p></li>\r
\r
-<li><a href="#verifying">Verifying or Getting a Certificate Chain</a>\r
+<li><a href="#verifying">Verifying and Getting a Certificate Chain</a>\r
<p>Verify a certificate chain and get it.</p></li>\r
\r
<li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a>\r
-<p>Load a certificate or key from a certificate file or a <span style="font-family: Courier New,Courier,monospace;">PKCS#12</span> file.</p></li>\r
+<p>Load a certificate or key from a certificate file or a PKCS#12 file.</p></li>\r
\r
<li><a href="#access">Implementing Access Control</a>\r
<p>Set access control rules for each individual client's data, certificates, and keys.</p></li>\r
\r
<p>To define the header file and privileges required to use the key manager:</p>\r
<ol> \r
-<li><p>To use the Key Manager privileged API, declare the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span> privilege in the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file of the application package.</p></li>\r
+<li><p>To use the Key Manager privileged API, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span> privilege in the manifest file of the application.</p></li>\r
<li><p>To use the functions and data types of the Key Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><ckmc/ckmc-manager.h></span> header file in your application:</p>\r
<pre class="prettyprint">\r
#include <ckmc/ckmc-manager.h>\r
\r
<h2 id="savingkey" name="savingkey">Saving, Getting, or Removing a Key</h2>\r
\r
-<p>To store, remove, and retrieve client keys from the key manager:</p>\r
+<p>To store, remove, and retrieve client keys using the key manager:</p>\r
\r
<ol><li>Store a new key:\r
<pre class="prettyprint">\r
\r
test_key.raw_key = (unsigned char *) binary_key;\r
test_key.key_size = strlen(binary_key);\r
-test_key.key_type = CKMC_KEY_NONE; // The real key type is determined by the key manager\r
-test_key.password = NULL; // This means the binary_key is not encrypted with any password\r
+test_key.key_type = CKMC_KEY_NONE; // Real key type is determined by the key manager\r
+test_key.password = NULL; // binary_key is not encrypted with a password\r
\r
store_policy.password = key_password; // NULL means that the test_key is not encrypted with a per key password\r
-store_policy.extractable = true; // This means that the key value is extractable\r
+store_policy.extractable = true; // Key value is extractable\r
\r
ret = ckmc_save_key(alias, test_key, store_policy);\r
if (CKMC_ERROR_NONE != ret)\r
}\r
</pre></li>\r
\r
-<li>Get a key from the key manager:\r
+<li>Get the key from the key manager:\r
<pre class="prettyprint">\r
int ret = CKMC_ERROR_NONE;\r
\r
do\r
{\r
ckmc_get_key(plist->alias, key_password, &test_key);\r
- dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", ++count_list, test_key->key_size);\r
+ dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", \r
+ ++count_list, test_key->key_size);\r
ckmc_key_free(test_key);\r
plist = plist->next;\r
}\r
while(plist != NULL);\r
\r
-ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed.\r
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed\r
</pre></li>\r
<li>Remove the key:\r
<pre class="prettyprint">\r
\r
<h2 id="savingcert" name="savingcert">Saving, Getting, or Removing a Certificate</h2>\r
\r
-<p>To store, remove, or retrieve the client certificate from the key manager:</p>\r
+<p>To store, remove, or retrieve the client certificate using the key manager:</p>\r
\r
<ol><li>Store a new certificate:\r
<pre class="prettyprint">\r
}\r
</pre></li>\r
\r
-<li>Get a certificate from the key manager:\r
+<li>Get the certificate from the key manager:\r
<pre class="prettyprint">\r
int ret = CKMC_ERROR_NONE;\r
\r
do\r
{\r
ckmc_get_cert(plist->alias, password, &test_cert);\r
- dlog_print(DLOG_INFO, LOG_TAG, "%d th cert : cert size =%d\n", ++count_list, test_cert->cert_size);\r
+ dlog_print(DLOG_INFO, LOG_TAG, "%d th cert : cert size =%d\n", \r
+ ++count_list, test_cert->cert_size);\r
ckmc_cert_free(test_cert);\r
plist = plist->next;\r
}\r
\r
<h2 id="savingdata" name="savingdata">Saving, Getting, or Removing Data</h2>\r
\r
-<p>To store, remove, or retrieve client data on or from the key manager:</p>\r
+<p>To store, remove, or retrieve client data using the key manager:</p>\r
\r
<ol><li>Store new data:\r
<pre class="prettyprint">\r
do\r
{\r
ckmc_get_data(plist->alias, password, &test_data);\r
- dlog_print(DLOG_INFO, LOG_TAG, "%d th data : data size =%d\n", ++count_list, test_data->size);\r
+ dlog_print(DLOG_INFO, LOG_TAG, "%d th data : data size =%d\n", \r
+ ++count_list, test_data->size);\r
ckmc_buffer_free(test_data);\r
plist = plist->next;\r
}\r
\r
<h2 id="creatingkey" name="creatingkey">Creating Key Pairs</h2>\r
\r
-<p>To generate asymmetric key pairs - the RSA, ECDSA, or DSA key pair:</p>\r
+<p>To generate asymmetric key pairs (RSA, ECDSA, or DSA key pair):</p>\r
\r
<ul><li><p>Create the RSA key pair:</p>\r
<pre class="prettyprint">\r
int ret = CKMC_ERROR_NONE;\r
\r
-size_t size = 2048; // Key Manager supports 1024, 2048, 4096\r
+size_t size = 2048; // Key manager supports 1024, 2048, 4096\r
const char *private_key_alias = "PRV_RSA1";\r
const char *public_key_alias = "PUB_RSA1";\r
ckmc_policy_s policy_private_key;\r
ckmc_policy_s policy_public_key;\r
\r
-// This private key is encrypted with an additional password\r
+// Private key is encrypted with an additional password\r
policy_private_key.password = (char *)"pri_password";\r
-policy_private_key.extractable = false; // This key cannot be extracted from the key manager\r
+policy_private_key.extractable = false; // Key cannot be extracted from the key manager\r
\r
policy_public_key.password = NULL;\r
policy_public_key.extractable = true;\r
\r
-ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);\r
+ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias,\r
+ policy_private_key, policy_public_key);\r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
ckmc_policy_s policy_private_key;\r
ckmc_policy_s policy_public_key;\r
\r
-// This private key is encrypted with an additional password\r
+// Private key is encrypted with an additional password\r
policy_private_key.password = (char *)"pri_password";\r
-policy_private_key.extractable = false; // This key cannot be extracted from the key manager\r
+policy_private_key.extractable = false; // Key cannot be extracted from the key manager\r
\r
policy_public_key.password = NULL;\r
policy_public_key.extractable = true;\r
\r
-ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias, policy_private_key, policy_public_key);\r
+ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias, \r
+ policy_private_key, policy_public_key);\r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
policy_public_key.password = NULL;\r
policy_public_key.extractable = true;\r
\r
-ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);\r
+ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, \r
+ policy_private_key, policy_public_key);\r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
<h2 id="creatingsignat" name="creatingsignat">Creating or Verifying Signatures</h2>\r
\r
<p>To create or verify signatures:</p>\r
-<ol><li>Store a private and public key.\r
+<ol><li>Store a private and public key:\r
<pre class="prettyprint">\r
int ret = CKMC_ERROR_NONE;\r
\r
prikey.raw_key = (unsigned char *)prv;\r
prikey.key_size = strlen(prv);\r
prikey.key_type = CKMC_KEY_NONE;\r
-prikey.password = key_passwd; // The private key, prv, is encrypted with the key_password\r
+prikey.password = key_passwd; // prv private key is encrypted with the key_password\r
\r
ret = ckmc_save_key(pri_alias, prikey, pripolicy);\r
if (CKMC_ERROR_NONE != ret)\r
msg_buff.data = (unsigned char *)message;\r
msg_buff.size = strlen(message);\r
\r
-ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &signature);\r
+ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, hash_algo, \r
+ pad_algo, &signature);\r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
}\r
\r
-ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);\r
+ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, *signature, \r
+ hash_algo, pad_algo);\r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
msg_buff.data = (unsigned char *)message;\r
msg_buff.size = strlen(message);\r
\r
-ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &signature);\r
+ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, \r
+ hash_algo, pad_algo, &signature);\r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
}\r
\r
-ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);\r
+ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, \r
+ *signature, hash_algo, pad_algo);\r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
</ul>\r
</li></ol>\r
\r
-<h2 id="verifying" name="verifying">Verifying or Getting a Certificate Chain</h2>\r
+<h2 id="verifying" name="verifying">Verifying and Getting a Certificate Chain</h2>\r
\r
<p>To verify and get a certificate chain using raw certificates or a certificate alias for untrusted certificates:</p>\r
<ul><li><p>Get a certificate chain with raw certificates.</p>\r
\r
ckmc_cert_s c_cert; // For a user certificate\r
ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate\r
-ckmc_cert_list_s untrustedcerts; // Linked list of untrusted CA certificate\r
+ckmc_cert_list_s untrustedcerts; // Linked list of untrusted CA certificates\r
ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain\r
\r
int cnt = 0;\r
\r
ckmc_cert_s c_cert; // For a user certificate\r
ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate\r
-ckmc_alias_list_s untrustedcerts; // Linked list of untrusted CA certificate's alias\r
+ckmc_alias_list_s untrustedcerts; // Linked list of untrusted CA certificate's aliases\r
ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain\r
\r
int cnt = 0;\r
if (ppkcs12->cert != NULL)\r
{\r
// Check a certificate\r
-\r
}\r
\r
int cnt = 0;\r
{\r
// Check a certificate list\r
\r
- tmp_list = tmp_list ->next;\r
+ tmp_list = tmp_list->next;\r
}\r
ckmc_pkcs12_free(ppkcs12); // Called when the pkcs12 data is no longer needed\r
</pre>\r
const char *target2 = "accessor-allow-2";\r
const char *alias = "targetData";\r
\r
-ret = ckmc_set_permission(alias, target1, CKMC_PERMISSION_READ); // Only allow reading data\r
+// Only allow reading data\r
+ret = ckmc_set_permission(alias, target1, CKMC_PERMISSION_READ); \r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
}\r
\r
-ret = ckmc_set_permission(alias, target2, CKMC_PERMISSION_READ | CKMC_PERMISSION_REMOVE); // Allow reading and deleting data\r
+// Allow reading and deleting data\r
+ret = ckmc_set_permission(alias, target2, CKMC_PERMISSION_READ | CKMC_PERMISSION_REMOVE); \r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
const char *target = "denied-accessor";\r
const char *alias = "targetData";\r
\r
-ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_READ); // Allow the target user to a read (alias)\r
+// Allow the target user to a read (alias)\r
+ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_READ); \r
if (CKMC_ERROR_NONE != ret)\r
{\r
// Error handling\r
}\r
\r
-ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_NONE); // Deny the target user access to data (alias)\r
+// Deny the target user access to data (alias)\r
+ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_NONE); \r
if (CKMC_ERROR_NONE != ret)\r
\r
{\r
\r
<h2 id="get" name="get">Getting Privilege Information</h2>\r
\r
-<p>To get privilege display information:</p>\r
+<p>To get privilege information:</p>\r
\r
<ol>\r
<li><p>To use the functions and data types of the Privilege Info API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><privilege_information.h></span> header file in your application:</p>\r
#include <privilege_information.h>\r
</pre></li>\r
<li>To get various privilege information:\r
-<ol type="a">\r
+<ul>\r
\r
-<li>Get the privilege display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name()</span> function. The parameters are the API version, privilege name, and privilege display name.\r
+<li>Get the privilege display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name()</span> function:\r
<pre class="prettyprint">\r
char* displayName = NULL;\r
-int retVal = privilege_info_get_display_name("2.2", "http://tizen.org/privilege/application.launch", &displayName);</pre> \r
+int retVal = privilege_info_get_display_name("2.2", \r
+ "http://tizen.org/privilege/application.launch",\r
+ &displayName);</pre> \r
</li>\r
\r
-<li>Get the privilege display name by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name_by_pkgtype()</span> function. The parameters are the package type, API version, privilege name, and privilege display name.\r
+<li>Get the privilege display name by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name_by_pkgtype()</span> function:\r
<pre class="prettyprint">\r
char* displayName = NULL;\r
-int retVal = privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2", "http://tizen.org/privilege/application.launch", &displayName);</pre> \r
+int retVal = privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", \r
+ "2.2", \r
+ "http://tizen.org/privilege/application.launch", \r
+ &displayName);</pre> \r
</li>\r
\r
-<li>Get the privilege description using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description()</span> function. The parameters are the API version, privilege name, and privilege description.\r
+<li>Get the privilege description using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description()</span> function:\r
<pre class="prettyprint">\r
char* description = NULL;\r
-int retVal = privilege_info_get_description("2.2", "http://tizen.org/privilege/application.launch", &description);</pre>\r
+int retVal = privilege_info_get_description("2.2", \r
+ "http://tizen.org/privilege/application.launch", \r
+ &description);</pre>\r
</li>\r
\r
\r
-<li>Get the privilege description by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description_by_pkgtype()</span> function. The parameters are the package type, API version, privilege name, and privilege description.\r
+<li>Get the privilege description by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description_by_pkgtype()</span> function:\r
<pre class="prettyprint">\r
char* description = NULL;\r
-int retVal = privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2", "http://tizen.org/privilege/application.launch", &description);</pre>\r
+int retVal = privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", \r
+ "2.2", \r
+ "http://tizen.org/privilege/application.launch", \r
+ &description);</pre>\r
</li>\r
\r
-</ol>\r
-<p>All functions above return the defined <span style="font-family: Courier New,Courier,monospace;">privilege_info_error_e</span> enum value (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">wearable</a> applications) that indicates the result of executing the function and provides the privilege description by assigning the matching value to the third parameter.</p>\r
+</ul>\r
+<p>The above functions return a <span style="font-family: Courier New,Courier,monospace;">privilege_info_error_e</span> enum value (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">wearable</a> applications) that indicates the value retrieval result. They also store the requested privilege display name or description in their last parameter.</p>\r
\r
</li></ol>\r
\r
\r
<h1>Calendar: Managing Calendar Events and Accessing the Calendar Database</h1>\r
\r
-\r
+ \r
<p>This tutorial demonstrates how you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.</p>\r
\r
<p>This feature is supported in mobile applications only.</p>\r
-\r
+ \r
<h2 id="warmup" name="warmup">Warm-up</h2>\r
<p>Become familiar with the Calendar API basics by learning about:</p>\r
<ul>\r
\r
\r
<h2 id="init" name="init">Initializing the Calendar</h2>\r
-\r
+ \r
<p>To initialize the Calendar Service:</p>\r
<ol><li>\r
<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a> API, include the <span style="font-family: Courier New,Courier,monospace"><calendar.h></span> header file in your application:</p>\r
</script>\r
\r
</body>\r
-</html>\r
+</html>
\ No newline at end of file
<li><a href="#File_upload">Uploading Files</a></li>
<li><a href="#File_download">Downloading Files</a></li>
<li><a href="#File_remove">Removing Files</a></li>
- <li><a href="#Clean_up">Clean up</a></li>
+ <li><a href="#Clean_up">Cleaning Up</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>Download a file from the storage</p></li>
<li><a href="#File_remove">Removing Files</a>
<p>Remove a file from the storage</p></li>
- <li><a href="#Clean_up">Clean up</a>
- <p>Destroy Service Adaptor handle</p></li>
+ <li><a href="#Clean_up">Cleaning Up</a>
+ <p>Destroy the Service Adaptor handle.</p></li>
</ul>
<h2 id="Starting_up" name="Starting_up">Initializing the Service Adaptor</h2>
-<p>To use the service adaptor plugins in your application, you must learn to obtain a service adaptor handle and a list of the available plugins:</p>
+<p>To use the Service Adaptor plugins in your application, you must learn to obtain a Service Adaptor handle and a list of the available plugins:</p>
<ol>
<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor</a> API, include the <span style="font-family: Courier New,Courier,monospace"><service_adaptor_client.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <service_adaptor_client.h>
</pre></li>
-<li><p>Obtain a service adaptor handle:</p>
+
+<li><p>Obtain a Service Adaptor handle:</p>
<pre class="prettyprint">
static service_adaptor_h service_adaptor;
typedef plugin_list_item_t plugin_list_t;
typedef plugin_list_item_t* plugin_list_item_h;
typedef plugin_list_t* plugin_list_h;
-
</pre>
</li>
-<li><p>Obtain a list of available service adaptor plugins:</p>
+<li><p>Obtain a list of available Service Adaptor plugins:</p>
<pre class="prettyprint">
static plugin_list_t plugins;
}
</pre>
-<h2 id="Clean_up" name="Clean_up">Clean up</h2>
-<p>To clean up, use the <span style="font-family: Courier New,Courier,monospace">service_adaptor_destroy()</span> function:</p>
+<h2 id="Clean_up" name="Clean_up">Cleaning Up</h2>
+<p>To clean up and destroy the Service Adaptor handle, use the <span style="font-family: Courier New,Courier,monospace">service_adaptor_destroy()</span> function:</p>
<pre class="prettyprint">
static void
service_adaptor_deinit(int result, void *user_data)
<p>Control the device power state.</p></li>
</ul></li>
<li><a href="#changes">Monitoring Device Changes</a>
- <p>Register a changed device event to monitor device changes.</p></li>
+ <p>Register a callback to monitor device changes.</p></li>
</ul>
<h2 id="battery" name="battery">Retrieving Battery Information</h2>
#include <device/battery.h></pre>
</li>
- <li>Get the battery details:
+ <li>To get the battery details:
<ul>
<li>Get the battery percentage with the <span style="font-family: Courier New,Courier,monospace;">device_battery_get_percent()</span> function.
<p>The function returns the current battery percentage as an integer value from 0 to 100 that indicates the remaining battery charge as a percentage of the maximum level.</p>
#include <device/display.h></pre>
</li>
- <li>Retrieve and set display properties:
+ <li>To retrieve and set display properties:
<ul>
<li>Get the number of display devices with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_numbers()</span> function:
<pre class="prettyprint">
</li>
<li>Get the maximum brightness with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_max_brightness()</span> function.
- <p>The function returns the maximum brightness value that can be set. This function always returns as 100.</p>
+ <p>The function returns the maximum brightness value that can be set, which is always 100.</p>
<pre class="prettyprint">
int error, max;
</pre>
</li>
- <li>Get and set the display state with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_state()</span> and <span style="font-family: Courier New,Courier,monospace;">device_display_change_state()</span> functions:
-
+ <li>Get and set the display state with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_state()</span> and <span style="font-family: Courier New,Courier,monospace;">device_display_change_state()</span> functions.
+<p>The <span style="font-family: Courier New,Courier,monospace;">display_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">wearable</a> applications) defines the available display states.</p>
<pre class="prettyprint">
int error;
display_state_e state;
error = device_display_change_state(DISPLAY_STATE_NORMAL);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">display_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">wearable</a> applications) defines the available display states.</p>
+
</li>
</ul></li></ol>
error = device_haptic_get_count(&num);
</pre>
</li>
-
+<li>To manage a haptic device:
+<ol type="a">
<li>Initialize the haptic device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_open()</span> function.
-<p>The function opens a haptic-vibration device and returns the handle of the haptic device. It makes a connection to the vibrator.</p>
+<p>The function opens a haptic-vibration device and returns the handle to it. It makes a connection to the vibrator.</p>
<pre class="prettyprint">
int error;
haptic_device_h handle;
</li>
<li>When no longer needed, uninitialize the haptic device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_close()</span> function.
-<p>The function closes the haptic handle. It disconnects the connection to the vibrator.</p>
+<p>The function closes the haptic handle and disconnects the connection to the vibrator.</p>
<pre class="prettyprint">
int error;
</pre>
</li>
</ol>
+</li>
+</ol>
<h2 id="led" name="led">Controlling LED Devices</h2>
<pre class="prettyprint">
#include <device/led.h></pre>
</li>
-
+<li>To manage a LED device:
+<ul>
<li>Get the maximum brightness value of a torch LED with the <span style="font-family: Courier New,Courier,monospace;">device_flash_get_max_brightness()</span> function.
<p>The function returns the maximum brightness value of the torch LED located next to the camera.</p>
<pre class="prettyprint">
</li>
<li>Play and stop a custom effect of the service LED with the <span style="font-family: Courier New,Courier,monospace;">device_led_play_custom()</span> and <span style="font-family: Courier New,Courier,monospace;">device_led_stop_custom()</span> functions.
-<p>The custom effect of the service LED that is located on the front of a device plays.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">led_custom_flags</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">wearable</a> applications) defines the available custom effects.</p>
+<p>The custom effect plays on the service LED that is located on the front of the device.</p>
<pre class="prettyprint">
int error;
-error = device_led_play_custom(1000,500,0xFFFF0000, LED_CUSTOM_DEFAULT);
+error = device_led_play_custom(1000, 500, 0xFFFF0000, LED_CUSTOM_DEFAULT);
error = device_led_stop_custom();
</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">led_custom_flags</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">wearable</a> applications) defines the available custom effects.</p>
+</li>
+</ul>
</li>
</ol>
<pre class="prettyprint">
#include <device/power.h></pre>
</li>
-
+<li>To lock and change the power state:
+<ul>
<li>Lock the power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_request_lock()</span> function.
-<p>The function locks the given lock state for a specified time. After the given timeout, the given lock state is unlocked automatically. If the process is destroyed, every lock is removed.</p>
+<p>The function locks the specific lock type for a specified time. After the given timeout, the lock type is unlocked automatically. If the process is destroyed, every lock is removed.</p>
<p>The <span style="font-family: Courier New,Courier,monospace;">power_lock_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">wearable</a> applications) defines the available lock types.</p>
</li>
<li>Unlock the power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_release_lock()</span> function.
-<p>The function releases the given lock state locked before.</p>
+<p>The function releases the specific lock type locked before.</p>
<pre class="prettyprint">
int error;
error = device_power_release_lock(POWER_LOCK_CPU);
</li>
<li>Change the current power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_wakeup()</span> function.
-<p>The function changes the current power state to the normal or dim state:</p>
+<p>The function changes the current power state to the normal or dim state, depending on the parameter value:</p>
<pre class="prettyprint">
int error;
+
+// Set to dim state
error = device_power_wakeup(true);
</pre>
</li>
+</ul>
+</li>
</ol>
<h2 id="changes" name="changes">Monitoring Device Changes</h2>
-<p>To monitor device changes:</p>
+<p>To monitor device changes in, for example, the device display state:</p>
<ol>
<li>
<p>To use the functions and data types of the Callback API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><device/callback.h></span> header file in your application:</p>
#include <device/callback.h></pre>
</li>
-<li>Define the device changed callback, which is called when a device status changes.
+<li>Define a callback, which is called when the device status changes.
<p>The <span style="font-family: Courier New,Courier,monospace;">device_callback_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">wearable</a> applications) defines the available callback types.</p>
</pre>
</li>
-<li>Register the callback function:
+<li>Register the callback function.
+<p>To monitor the display state changes, use the <span style="font-family: Courier New,Courier,monospace;">DEVICE_CALLBACK_DISPLAY_STATE</span> callback type.</p>
<pre class="prettyprint">
int error;
error = device_add_callback(DEVICE_CALLBACK_DISPLAY_STATE, changed_cb, NULL);
<h2 id="send" name="send">Sending a Log Message</h2>
-<p>To send a log message with the <span style="font-family: Courier New,Courier,monospace">MY_APP</span> tag with various priorities:</p>
+<p>To send a log message with the <span style="font-family: Courier New,Courier,monospace">MY_APP</span> tag with various priorities, use the <span style="font-family: Courier New,Courier,monospace">dlog_print()</span> function:</p>
<pre class="prettyprint">
#define TAG "MY_APP"
<h2 id="check" name="check">Checking the Output Logs</h2>
-<p>To execute dlogutil on the device sdb shell to check the out log:</p>
+<p>To check the content of the output log, execute dlogutil on the device sdb shell. The following code snippet shows examples of the various available commands and their output.</p>
<p>For information on connecting to the target and using it with SDB, see <a href="../../../../org.tizen.devtools/html/common_tools/smart_dev_bridge.htm">Smart Development Bridge</a>.</p>
<pre class="prettyprint">
<h1>Media key: Managing Callbacks from Media Key Events</h1>
-<p>This tutorial demonstrates how you can manage callbacks for media key events.</p>
+<p>This tutorial demonstrates how you can react to media key events using callbacks.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Media key API basics by learning about:</p>
#include <media_key.h>
</pre></li>
-<li>Implement the callback to handle media key events:
+<li>Implement a callback to handle media key events.
+<p>In the following example, the callback simply prints out the key from which the event originated and the state change that caused the event:</p>
<pre class="prettyprint">
void
event_cb(media_key_e key, media_key_event_e status, void* user_data)
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "Reserve media key fail.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "Reserve media key failed.");
}
</pre>
</li>
<li>
-<p>When you no longer need to track media key events, unregister the callback with the <span style="font-family: Courier New,Courier,monospace;">media_key_release()</span> function:</p>
+<p>When you no longer need to monitor the media key events, unregister the callback with the <span style="font-family: Courier New,Courier,monospace;">media_key_release()</span> function:</p>
<pre class="prettyprint">
r = media_key_release();
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "Fail. Unknown reason.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "Failed. Unknown reason.");
}
}
</pre></li></ol>
<li><a href="#get">Getting Runtime Information</a>
<p>Get runtime information.</p></li>
<li><a href="#monitor">Monitoring Runtime Information Changes</a>
- <p>Register a callback function for a specific change in the runtime information.</p>
+ <p>Register a callback function to monitor specific changes in the runtime information.</p>
</li></ul>
<h2 id="get" name="get">Getting Runtime Information</h2>
-<p>To get runtime information, which consists of key, value pairs:</p>
-
+<p>The runtime information consists of key and value pairs.</p>
+<p>To get information on, for example, whether Bluetooth is enabled or an audio jack connected:</p>
<ol>
<li><p>To use the functions and data types of the Runtime information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><runtime_info.h></span> header file in your application:</p>
<pre class="prettyprint">
</pre></li>
<li>Check whether Bluetooth is enabled.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span> key to check whether Bluetooth is enabled. The type of the value is <span style="font-family: Courier New,Courier,monospace">bool</span>, and the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_bool()</span> function is used for the information.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span> key with the data type-specific get function.</p>
+<p>The Bluetooth enabled key data type is <span style="font-family: Courier New,Courier,monospace">bool</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_bool()</span> function.</p>
<pre class="prettyprint">
#include <stdbool.h>
dlog_print(DLOG_INFO, LOG_TAG, "Bluetooth: %s", value ? "Enabled" : "Disabled");
}
</pre></li>
-<li>Get the audio jack status.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span> key to get the audio jack status. The type of the value is <span style="font-family: Courier New,Courier,monospace">integer</span>, and the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_int()</span> function is used for the information.</p>
+<li>Get the audio jack connection status.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span> key with the data type-specific get function.</p>
+<p>The audio jack status key data type is <span style="font-family: Courier New,Courier,monospace">integer</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_int()</span> function.</p>
<pre class="prettyprint">
void
<h2 id="monitor" name="monitor">Monitoring Runtime Information Changes</h2>
-<p>To monitor runtime information changes:</p>
+<p>Applications can be notified about changes in the runtime information.</p>
+<p>To monitor, for example, the connection state of the USB cable:</p>
<ol>
<li><p>To use the functions and data types of the Runtime information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><runtime_info.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <runtime_info.h>
</pre></li>
-<li><p>Applications can be notified about changes in the runtime information. The <span style="font-family: Courier New,Courier,monospace">runtime_info_set_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace">runtime_info_unset_changed_cb()</span> functions are used to register a callback function. </p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span> key to monitor the connection state of the USB cable:</p>
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">runtime_info_set_changed_cb()</span> function with the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span> key to register a callback that is triggered each time the USB cable connection state changes.</p>
+<p>When no longer needed, unregister the callback with the <span style="font-family: Courier New,Courier,monospace">runtime_info_unset_changed_cb()</span> function.</p>
<pre class="prettyprint">
#include <stdbool.h>
+// Callback
void
usb_connection_changed(runtime_info_key_e key, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "USB status: %s", value ? "Connected" : "Disconnected");
}
+// Register and unregister
void
func(void)
{
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#model">Getting the Device Model Name</a></li>
- <li><a href="#camera">Checking Whether a Camera is Provided</a>
+ <li><a href="#check">Checking for Supported Features</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul>
<li><a href="#model">Getting the Device Model Name</a>
<p>Get the model name of the device.</p></li>
-<li><a href="#camera">Checking Whether a Camera is Provided</a>
+<li><a href="#check">Checking for Supported Features</a>
<p>Check whether the device provides a camera.</p></li>
</ul>
<pre class="prettyprint">
#include <system_info.h>
</pre></li>
-<li><p>Device-specific information consists of "key, value" pairs. To get the device model name, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/system/model_name</span> key.</p>
-<p>The type of the value is <span style="font-family: Courier New,Courier,monospace;">string</span>, which means that the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_string()</span> function is used for the information. The value of the key must be released by the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+<li><p>Device-specific information consists of "key, value" pairs. To get the device model name, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/system/model_name</span> key with the data type-specific get function.</p>
+<p>The model name key data type is <span style="font-family: Courier New,Courier,monospace;">string</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_string()</span> function.</p>
+<p>When no longer needed, release the value of the key with the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
<pre class="prettyprint">
void
}
</pre></li></ol>
-<h2 id="camera" name="camera">Checking Whether a Camera is Provided</h2>
+<h2 id="check" name="check">Checking for Supported Features</h2>
-<p>To check whether a camera is provided:</p>
+<p>To check, for example, whether the device provides a camera:</p>
<ol>
<li><p>To use the functions and data types of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><system_info.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <system_info.h>
</pre></li>
-<li><p>To check whether the device provides any kind of a camera, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/camera</span> key.</p>
-<p>The type of the value is <span style="font-family: Courier New,Courier,monospace;">bool</span>, which means that the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_bool()</span> function is used for the information.</p>
+<li><p>To determine whether the device has a camera, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/camera</span> key with the data type-specific get function.</p>
+<p>The camera key data type is <span style="font-family: Courier New,Courier,monospace;">bool</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_bool()</span> function.</p>
<pre class="prettyprint">
#include <stdbool.h>
<p>Become familiar with the System Settings API basics by learning about:</p>
<ul>
<li><a href="#settings">Managing System Settings</a>
- <p>Obtain, set, and track system settings.</p>
+ <p>Obtain and monitor system setting values.</p>
</li>
</ul>
</pre>
</li>
-<li><p>Get the setting data.</p>
+<li><p>Obtain the setting data.</p>
<p>The available settings are defined in the <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications).</p>
<p>Read the data using the following functions, according to the data type of the value you want to read:</p>
#define SYS_INFO_COUNT 6
int i;
-for (i = 0; i<SYS_INFO_COUNT; i++)
+for (i = 0; i < SYS_INFO_COUNT; i++)
{
dlog_print(DLOG_ERROR, LOG_TAG, "%d- System_settings: %s : ", i, _info_key[_ret_type[i].key]);
</li>
-<li><p>Track changes in the settings.</p>
-<ol type="a"><li><p>To track changes in the value of any system setting, set a callback function with the proper key.</p>
+<li><p>Monitor changes in the setting values.</p>
+<ol type="a"><li><p>To monitor when a system setting value changes, set a callback using the <span style="font-family: Courier New,Courier,monospace">system_settings_set_changed_cb()</span> function with the appropriate key as the first parameter.</p>
-<p>Because the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span> setting does not support the callback function, you must iterate through the <span style="font-family: Courier New,Courier,monospace">SYS_INFO_COUNT-1</span> records.</p>
+<p>Because the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span> setting does not support the callback function, you must iterate through the <span style="font-family: Courier New,Courier,monospace">SYS_INFO_COUNT - 1</span> records.</p>
<pre class="prettyprint">
-for (i = 0; i<SYS_INFO_COUNT-1; i++)
+for (i = 0; i < SYS_INFO_COUNT - 1; i++)
{
system_settings_set_changed_cb(_ret_type[i].key, _system_settings_changed_cb, 0);
}
</pre></li>
-<li><p>Define the callback which is invoked after each change. The <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> key refers to the key which has changed.</p>
+<li><p>Define the callback to be invoked after each change.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> key refers to the key that has changed.</p>
<pre class="prettyprint">
static void
<li><p>When the callbacks are no longer needed, unset them:</p>
<pre class="prettyprint">
-for (i = 0; i<SYS_INFO_COUNT-1; i++)
+for (i = 0; i < SYS_INFO_COUNT - 1; i++)
{
system_settings_unset_changed_cb(_ret_type[i].key, _system_settings_changed_cb, 0);
}
{
int cookies_f1 = 123;
- trace_async_begin(cookies, "event name");
+ trace_async_begin(cookies_f1, "event name");
}
void
<p>Become familiar with the Phonenumber utils API basics by learning about:</p>
<ul>
<li><a href="#get">Getting the Location</a>
- <p>Get the location based on the region and language.</p></li>
+ <p>Get the location from the phone number based on the region and language.</p></li>
<li><a href="#format">Formatting the Number</a>
<p>Get the number formatted based on the region.</p></li>
</ul>
</li></ol>
<h2 id="format" name="format">Formatting the Number</h2>
-<p>To format the phone number:</p>
+<p>To format the phone number according to the rules of a specific region:</p>
<ol>
#include <phone_number.h>
</pre>
</li>
-<li><p>Use the region to format the phone number:</p>
+<li><p>Format the phone number to use region-specific separators:</p>
<pre class="prettyprint">int ret;
char *formatted_number = NULL;
<ul class="toc">
<li><a href="#init">Initializing the Telephony Service</a></li>
<li><a href="#call">Getting Call Information</a></li>
- <li><a href="#sim">Getting SIM Information</a></li>
+ <li><a href="#sim">Getting SIM Card Information</a></li>
<li><a href="#network">Getting Network Information</a></li>
<li><a href="#modem">Getting Modem Information</a></li>
</ul>
<h1>Telephony Information: Handling Phone Call, SIM Card, and Network Information</h1>
-<p>This tutorial demonstrates how you can get the status of both voice and video calls, get notified when the user makes a voice or video call or hangs up the phone, extract information stored on a SIM card, and get IMEI information.</p>
+<p>This tutorial demonstrates how you can get the state of both voice and video calls, get notified when the user makes a voice or video call or hangs up the phone, extract information stored on a SIM card, and get IMEI information.</p>
<h2>Warm-up</h2>
<li><a href="#init">Initializing the Telephony Service</a>
<p>Initialize telephony for use.</p></li>
<li><a href="#call">Getting Call Information</a>
- <p>Access call information and track changes in call status.</p></li>
- <li><a href="#sim">Getting SIM Information</a>
- <p>Access SIM information and track changes in SIM status.</p></li>
+ <p>Access call information and track changes in the call state.</p></li>
+ <li><a href="#sim">Getting SIM Card Information</a>
+ <p>Access SIM card information and track changes in the SIM card state.</p></li>
<li><a href="#network">Getting Network Information</a>
- <p>Access network information and track changes in network status.</p></li>
+ <p>Access network information and track changes in the network state.</p></li>
<li><a href="#modem">Getting Modem Information</a>
<p>Access modem information.</p></li>
</ul>
<h2 id="init" name="init">Initializing the Telephony Service</h2>
-<p>To initialize the telephony service:</p>
+
<p>In a multi-SIM scenario, you must define which subscription (SIM1 or SIM2) you need, in case the application is related to calling, networks, modems, or SIM cards. Telephony provides a function to create handles for different subscriptions.</p>
-
+<p>To initialize the telephony service:</p>
<ol>
<li>
<p>To use the functions and data types of the Telephony Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><telephony.h></span> header file in your application:</p>
#include <telephony.h>
</pre></li>
<li>
-<p>To create a telephony handle, use the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure that holds the handles for all the subscriptions defined in <span style="font-family: Courier New,Courier,monospace">telephony_common.h</span>.</p>
+<p>To create a telephony handle, use the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure that holds the handles for all the subscriptions defined in the <span style="font-family: Courier New,Courier,monospace">telephony_common.h</span> header file:</p>
<pre class="prettyprint">
typedef
telephony_h *handle;
} telephony_handle_list_s;
</pre>
-<p>Pass the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure pointer to get the telephony handles for all subscriptions.</p>
-<p>For example, there are 2 handles in a dual SIM device. In this case, <span style="font-family: Courier New,Courier,monospace">handle[0]</span> means the primary SIM and <span style="font-family: Courier New,Courier,monospace">handle[1]</span> means the secondary SIM.</p>
-<p>You can send requests to specific subscriptions using the telephony handle for that subscription.</p></li>
-<li><p>Get the telephony handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_init()</span> function.</p>
-
+</li>
+<li>
+<p>Get the telephony handle with the <span style="font-family: Courier New,Courier,monospace">telephony_init()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure pointer as a parameter to get the telephony handles for all subscriptions.</p>
+<p>For example, there are 2 handles in a dual SIM device. In this case, <span style="font-family: Courier New,Courier,monospace">handle[0]</span> means the primary SIM and <span style="font-family: Courier New,Courier,monospace">handle[1]</span> means the secondary SIM. You can send requests to specific subscriptions using the telephony handle for that subscription.</p>
<pre class="prettyprint">
-#include <telephony.h>
telephony_handle_list_s handle_list;
int
}
</pre></li>
-<li><p>When the telephony handle is no longer needed, free the handle with the <span style="font-family: Courier New,Courier,monospace">telephony_deinit()</span> function.</p>
-
+<li><p>When no longer needed, free the telephony handle with the <span style="font-family: Courier New,Courier,monospace">telephony_deinit()</span> function:</p>
<pre class="prettyprint">
void
tutorial_telephony_deinit()
<h2 id="call" name="call">Getting Call Information</h2>
+<p>To get the voice and video call state and be notified when the user makes a voice or video call or hangs up the phone, use the Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications).</p>
<p>Getting call information involves:</p>
<ul>
<li><a href="#call_list">Getting the current call list</a></li>
- <li><a href="#change_noti">Receiving change notifications for the call status</a></li>
+ <li><a href="#change_noti">Receiving change notifications for the call state</a></li>
</ul>
-<p>To get the voice and video call status and be notified when the user makes a voice or video call or hangs up the phone, use the Telephony Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) in call-related actions.</p>
+
<h3 name="call_list" id="call_list">Getting the Current Call List</h3>
<p>To get the current call list:</p>
-<ol><li><p>Get the current call handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span> function:</p>
+<ol><li><p>Get the current call handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span> function.</p>
+<p>After getting the handle, you can use it to retrieve various call information (such as handle ID, number, type, status, direction, and conference status).</p>
<pre class="prettyprint">
unsigned int count;
telephony_call_get_direction(call_list[i], &direction);
telephony_call_get_conference_status(call_list[i], &conf_status);
- dlog_print(DLOG_INFO, LOG_TAG, "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
handle_id, number,
type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
}
}
</pre>
-<p>After getting the handle, you can use it to retrieve various call information (such as handle ID, number, type, status, direction, conference status).</p></li>
+</li>
-<li><p>When the call handle is no longer needed, call the <span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span> function to free the handle:</p>
+<li><p>When no longer needed, free the call handle with the <span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span> function:</p>
<pre class="prettyprint">
void
tutorial_telephony_call_release_call_list()
}
</pre></li></ol>
-<h3 name="change_noti" id="change_noti">Receiving Change Notifications for the Call Status</h3>
+<h3 name="change_noti" id="change_noti">Receiving Change Notifications for the Call State</h3>
-<p>Use a callback function to obtain change notifications for the call status asynchronously. The call ID is returned through a callback function, given to the function as one of its parameters.</p>
+<p>To receive notifications of call state changes asynchronously, register a callback with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function.</p>
+<p>You have to register the callback separately for each call state, using the applicable <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_XXX</span> or <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_XXX</span> notification value in the second parameter of the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The available values are defined in the <span style="font-family: Courier New,Courier,monospace">telephony_noti_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications).</p>
+<p>When the notifications are no longer needed, unregister the callback for each call state with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function.</p>
+<p>The following example registers callbacks for various voice call states:</p>
-<p>To be notified when the voice call status changes, implement and register a callback function compatible with the <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> function typedef:</p>
<pre class="prettyprint">
static int
telephony_call_get_direction(call_list[i], &direction);
telephony_call_get_conference_status(call_list[i], &conf_status);
- dlog_print(DLOG_INFO, LOG_TAG, "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
handle_id, number,
type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
for (i = 0; i < (sizeof(voice_call_noti_tbl) / sizeof(int)); i++)
{
- ret = telephony_set_noti_cb(handle_list.handle[0], voice_call_noti_tbl[i], voice_call_status_noti_cb, NULL);
+ ret = telephony_set_noti_cb(handle_list.handle[0], voice_call_noti_tbl[i],
+ voice_call_status_noti_cb, NULL);
if (ret != TELEPHONY_ERROR_NONE)
{
// Error handling
}
</pre>
-<p>After the callback is registered, you are notified of the voice call status until you cancel the registration. To unregister the callback, call the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function for each notification.</p>
-
- <h2 id="sim" name="sim">Getting SIM Information</h2>
+ <h2 id="sim" name="sim">Getting SIM Card Information</h2>
+ <p>To extract information stored on a SIM card, use the SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications).</p>
<p>Getting SIM information involves:</p>
<ul>
- <li><a href="#sim_state">Getting the state of the SIM</a></li>
- <li><a href="#sim_noti">Receiving change notifications for the SIM state</a></li>
- <li><a href="#sim_info">Getting SIM information</a></li>
+ <li><a href="#sim_state">Getting the SIM card state</a></li>
+ <li><a href="#sim_noti">Receiving change notifications for the SIM card state</a></li>
+ <li><a href="#sim_info">Getting SIM card details</a></li>
</ul>
-<p>To extract information stored on a SIM card, use the Telephony SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications).</p>
-<h3 name="sim_state" id="sim_state">Getting the State of the SIM</h3>
-<p>Before retrieving information from the SIM card, retrieve the state of the SIM card. You can get SIM-related information only if the state of the SIM is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</p>
-<p>You can get the state of the SIM card by calling the <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span> function. It returns the status of the SIM, which is one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications), through its output parameters.</p>
+<h3 name="sim_state" id="sim_state">Getting the SIM Card State</h3>
+<p>Before retrieving information from the SIM card, retrieve the card state. You can get SIM-related information only if the card state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</p>
+
+<p>To get the state, call the <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span> function. It returns the SIM card state in its second parameter, using the values of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications).</p>
<pre class="prettyprint">
void
}
</pre>
-<h3 name="sim_noti" id="sim_noti">Receiving Change Notifications for the SIM State</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain notifications for the changes in the SIM state asynchronously. The SIM status is returned through a callback function, given to the function as one of its parameters.</p>
+<h3 name="sim_noti" id="sim_noti">Receiving Change Notifications for the SIM Card State</h3>
+
+<p>To receive notifications of SIM card state changes asynchronously, register a callback with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The callback returns the SIM state in its third parameter.</p>
+<p>When the notifications are no longer needed, unregister the callback with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID as a parameter.</p>
+
<pre class="prettyprint">
void
{
telephony_error_e ret;
ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_SIM_STATUS,
- sim_state_noti_cb, NULL);
+ sim_state_noti_cb, NULL);
if (ret != TELEPHONY_ERROR_NONE)
{
// Error handling
}
</pre>
-<p>The callback function is invoked automatically when the status of the SIM changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function.</p>
+<h3 name="sim_info" id="sim_info">Getting SIM Card Details</h3>
-<p>Once the callback function of the SIM state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
+<p>If the current SIM card state is <span style="font-family: Courier New,Courier,monospace">SIM_STATE_AVAILABLE</span>, you can call various <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_XXX()</span> functions to retrieve the SIM card details: ICC-ID, operator (MCC+MNC), MSIN, SPN, subscriber number, subscriber ID, and application list.</p>
-<h3 name="sim_info" id="sim_info">Getting SIM Information</h3>
-<p>If you know the current SIM state and, it is for example <span style="font-family: Courier New,Courier,monospace">SIM_STATE_AVAILABLE</span>, call the SIM API to get the following information from the SIM card: ICC-ID, operator (MCC+MNC), MSIN, SPN, subscriber number, subscriber ID, and application list.</p>
+<p>If the functions return <span style="font-family: Courier New,Courier,monospace">SIM_ERROR_NONE</span>, the requested SIM information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
-<p>If the function returns <span style="font-family: Courier New,Courier,monospace">SIM_ERROR_NONE</span>, the requested SIM information is received and stored in an output parameter. You must free all returned variables once you are done with them.</p>
-
-<p>To get ICC-ID information from a SIM card:</p>
+<p>For example, to get ICC-ID information from a SIM card:</p>
<pre class="prettyprint">
void
<h2 id="network" name="network">Getting Network Information</h2>
+ <p>To access information about the current cellular network and telephony service, use the Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications).</p>
<p>Getting network information involves:</p>
<ul>
<li><a href="#network_state">Getting the network service state</a></li>
- <li><a href="#network_noti">Receiving network service state change notifications</a></li>
- <li><a href="#network_info">Getting network information</a></li>
+ <li><a href="#network_noti">Receiving change notifications for the network service state</a></li>
+ <li><a href="#network_info">Getting network details</a></li>
</ul>
-<p>To access, but not change, information about the current cellular network and telephony service, use the Telephony Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications).</p>
+
<h3 name="network_state" id="network_state">Getting the Network Service State</h3>
-<p>Determine the state of the service network. The network service state is one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> enumeration values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
+<p>Before retrieving information about the current cellular network and telephony service, retrieve the network service state. You can get the related information only if the service state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</p>
+<p>To get the state, call the <span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span> function. It returns the network service state in its second parameter, using the values of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
-<p>You can only get telephony network information if the state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</p>
<pre class="prettyprint">
-void
+void
tutorial_telephony_network_get_service_state()
{
telephony_network_service_state_e network_service_state;
}
</pre>
-<h3 id="network_noti" name="network_noti">Receiving Network Service State Change Notifications</h3>
+<h3 id="network_noti" name="network_noti">Receiving Change Notifications for the Network Service State</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain change notifications for a network asynchronously. The network status is returned through a callback function, given to the function as one of its parameters.</p>
-
-<p>The Telephony Network API provides change notifications for the following information:</p>
-<ul>
- <li>Network service state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span>)</li>
- <li>Cell ID changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span>)</li>
- <li>Roaming state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span>)</li>
- <li>Signal strength changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span>)</li>
- <li>Network name changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span>)</li>
- <li>PS (packet-switched) type changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span>)</li>
- <li>Default data subscription changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span>)</li>
- <li>Default subscription changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span>)</li>
-</ul>
+<p>To receive notifications of network service state changes asynchronously, register a callback with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The callback returns the service state in its third parameter.</p>
+<p>You have to register the callback separately for each service state (for example, Cell ID, RSSI level, network name, PS type, default data subscription, default subscription, or roaming state), using the applicable <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_XXX</span> notification value in the second parameter of the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The available values are defined in the <span style="font-family: Courier New,Courier,monospace">telephony_noti_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications).</p>
+<p>When the notifications are no longer needed, unregister the callback for each service state with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID as a parameter.</p>
+<p>The following example registers a callback for the network service states:</p>
<pre class="prettyprint">
void
network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
{
telephony_network_service_state_e network_state = *(int *)data;
- dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", network_state);
+ dlog_print(DLOG_INFO, LOG_TAG, "Network service state: [%d]", network_state);
}
void
}
</pre>
-<p>The callback function is invoked automatically when the status of the network changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. To get additional notifications when the Cell ID, RSSI level, network name, PS type, default data subscription, default subscription, or roaming state changes, define corresponding callback functions. Register each one of them with their corresponding notification ID.</p>
-
-<p>Once the callback function of the network state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
-
-<h3 name="network_info" id="network_info">Getting Network Information</h3>
-<p>If the current network service state is <span style="font-family: Courier New,Courier,monospace">NETWORK_INFO_SERVICE_STATE_IN_SERVICE</span>, use the Telephony Network API to get the network information: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type.</p>
-
-<p>You must free all returned variables (strings) once you are done with them.</p>
+<h3 name="network_info" id="network_info">Getting Network Details</h3>
-<p>To get network information:</p>
-
-<ul><li><p>To get the Cell ID:</p>
+<p>If the current network service state is <span style="font-family: Courier New,Courier,monospace">NETWORK_INFO_SERVICE_STATE_IN_SERVICE</span>, you can call various <span style="font-family: Courier New,Courier,monospace">telephony_network_get_XXX()</span> functions to retrieve the network details: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type.</p>
+<p>If the functions return <span style="font-family: Courier New,Courier,monospace">TELEPHONY_ERROR_NONE</span>, the requested network information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
+<p>For example, to get the cell ID and MNC information:</p>
<pre class="prettyprint">
+// Cell ID
void
tutorial_telephony_network_get_cell_id()
{
return ret;
}
-</pre></li>
-
-<li><p>To get the MNC:</p>
-<pre class="prettyprint">
+// MNC
void
tutorial_telephony_network_get_mnc()
{
return ret;
}
-</pre></li></ul>
+</pre>
<h2 id="modem" name="modem">Getting Modem Information</h2>
-<p>To access, but not change, information about the modem (IMEI and power status), use the Telephony Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications).</p>
-
-<p>To get modem information, use the <span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span> function, and free all returned variables (strings) once you are done with them.</p>
+<p>To access information about the modem, use the Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications).</p>
+<p>You can call various <span style="font-family: Courier New,Courier,monospace">telephony_modem_get_XXX()</span> functions to retrieve the modem details: IMEI and power status.</p>
+<p>If the functions return <span style="font-family: Courier New,Courier,monospace">TELEPHONY_ERROR_NONE</span>, the requested modem information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
+<p>For example, to get IMEI information:</p>
<pre class="prettyprint">
void
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>External Output Manager: Using the External Output Devices</title>
+ <title>External Output Manager: Using External Output Devices</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>External Output Manager: Using the External Output Devices</h1>
+<h1>External Output Manager: Using External Output Devices</h1>
<p>This tutorial demonstrates how you can control external output devices with the External Output Manager (EOM).</p>
<p>This feature is supported in mobile applications only.</p>
ret = eom_set_output_attribute(output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);
if (ret != EOM_ERROR_NONE)
{
- // Attribute setting failed, the external output device cannot be used. Deinitializing
+ // Attribute setting failed, the external output device cannot be used
+ // Deinitializing
eom_deinit();
return -1;
<ol>
<li>Define the callbacks for various state changes:
<pre class="prettyprint">
-typedef
-struct
+typedef struct
{
Evas_Object *external_window;
int output_id;
if (state == EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE)
{
- // Start displaying the image to the external output(info->external_window);
+ // Start displaying the image to the external output (info->external_window);
}
else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE)
{
#include <minicontrol_provider.h>
</pre>
</li>
-<li><p>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function:</p>
-
+<li><p>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function.</p>
+<p>To create a minicontrol on the quick panel, the second parameter must be set to <span style="font-family: Courier New,Courier,monospace">MINICONTROL_TARGET_VIEWER_QUICK_PANEL</span>.</p>
<pre class="prettyprint">
Evas_Object *win;
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>
<li>Add a text label on the minicontrol using the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function:
<p>To start the IME application life-cycle:</p>
<ol>
<li>Implement the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function as the main entry point of IME application:
-<pre class="prettyprint">void ime_app_main(int argc, char **argv);</pre>
-<p>The function is called when the user selects the IME as default from the Keyboard selection menu in the Settings application.</p>
+<pre class="prettyprint">
+void ime_app_main(int argc, char **argv);
+</pre>
+<p>The function is called when the user selects the IME as default from the IME selector menu.</p>
</li>
<li>Inside the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function, add the required callbacks and call the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function to start the application:
-<pre class="prettyprint">int ime_run(ime_callback_s *basic_cb, void *user_data);</pre></li>
+<pre class="prettyprint">
+int ime_run(ime_callback_s *basic_cb, void *user_data);
+</pre></li>
</ol>
<h2 id="callback" name="callback">Adding Event Callbacks</h2>
<ol type="a">
<li>
-<p>You must register and implement the <span style="font-family: Courier New,Courier,monospace">create()</span>, <span style="font-family: Courier New,Courier,monospace">terminate()</span>, <span style="font-family: Courier New,Courier,monospace">show()</span>, and <span style="font-family: Courier New,Courier,monospace">hide()</span> callback functions. Register them as the parameter of the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:</p>
+<p>You must register the <span style="font-family: Courier New,Courier,monospace">create()</span>, <span style="font-family: Courier New,Courier,monospace">terminate()</span>, <span style="font-family: Courier New,Courier,monospace">show()</span>, and <span style="font-family: Courier New,Courier,monospace">hide()</span> callbacks.</p>
+<p>Add the callbacks to the <a href="../../../../org.tizen.native.mobile.apireference/structime__callback__s.html">ime_callback_s</a> structure, and pass the structure as a parameter to the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:</p>
<pre class="prettyprint">
#include <Elementary.h>
}
</pre>
</li>
-<li>Define the callback functions:
+<li>Define the callbacks:
<pre class="prettyprint">
static void
create(void *user_data)
// Update IME size information
ime_set_size(portrait_w, portrait_h, landscape_w, landscape_h);
- // Create or initialize the resources
+ // Create or initialize resources
}
static void
ime_context_get_return_key_state(context, &return_key_state);
// Draw the proper Return key
- // Show IME window
+ // Show the IME window
evas_object_show(ime_win);
}
{
Evas_Object *ime_win = ime_get_main_window();
- // Hide IME window
+ // Hide the IME window
evas_object_hide(ime_win);
}
</pre>
-<p>In the <span style="font-family: Courier New,Courier,monospace">show()</span> callback, the IME application can get the contextual information from an associated text input UI control to configure the keyboard state and look accordingly. The contextual information of each input UI control is provided through the <span style="font-family: Courier New,Courier,monospace">ime_context_get_XXX()</span> functions in the <span style="font-family: Courier New,Courier,monospace">inputmethod.h</span> header file.</p>
+<p>In the <span style="font-family: Courier New,Courier,monospace">show()</span> callback, the IME application can get the contextual information from an associated text input UI control to configure the keyboard state and look accordingly. The contextual information of each input UI control is provided through the <span style="font-family: Courier New,Courier,monospace">ime_context_get_XXX()</span> functions defined in the <span style="font-family: Courier New,Courier,monospace">inputmethod.h</span> header file.</p>
</li>
</ol>
</li>
}
</pre>
</li>
-<li>Define the optional callback functions:
+<li>Define the registered callbacks:
<ul>
<li>The <span style="font-family: Courier New,Courier,monospace">focus_in()</span> callback is triggered when an associated text input UI control in any application gets the focus. Usually, the <span style="font-family: Courier New,Courier,monospace">focus_in()</span> event is followed by the <span style="font-family: Courier New,Courier,monospace">show()</span> event.
<h2 id="menu" name="menu">Making a Keyboard Option Menu</h2>
<p>To make the option menu for the keyboard:</p>
<ol>
-<li>Add the necessary callback functions for reacting to the keyboard option menu opening and closing before calling the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:
+<li>Add the necessary callbacks for reacting to the keyboard option menu opening and closing, before calling the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:
<pre class="prettyprint">
-static void
-option_window_created(Evas_Object *window, ime_option_window_type_e type, void *user_data);
-static void
-option_window_destroyed(Evas_Object *window, void *user_data);
+static void option_window_created(Evas_Object *window, ime_option_window_type_e type, void *user_data);
+static void option_window_destroyed(Evas_Object *window, void *user_data);
-void ime_app_main(int argc, char **argv)
+void
+ime_app_main(int argc, char **argv)
{
ime_callback_s basic_callback =
{
static void
option_window_created(Evas_Object *window, ime_option_window_type_e type, void *user_data)
{
- // Create the option window.
+ // Create the option window
// Draw the content to the given window object
evas_object_show(window);
<p>If the function is successful, it returns 0.</p>
</li>
-<li>To check which IME is current selected as the default keyboard, call the <span style="font-family: Courier New,Courier,monospace">ime_manager_get_active_ime()</span> function:
+<li>To check which IME is currently selected as the default keyboard, call the <span style="font-family: Courier New,Courier,monospace">ime_manager_get_active_ime()</span> function:
<pre class="prettyprint">
void get_active_ime()
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating and Destroying STT Handles</a></li>
+ <li><a href="#init">Initializing the STT</a></li>
<li><a href="#set">Setting and Unsetting Callbacks</a></li>
<li><a href="#get">Getting Information</a></li>
<li><a href="#prepare">Connecting and Disconnecting the STT</a></li>
<h1>STT: Recognizing Speech</h1>
-<p>This tutorial demonstrates how you can recognize sound data recorded by user and send the result as text.</p>
+<p>This tutorial demonstrates how you can recognize sound data recorded by the user and manage the result as text.</p>
<h2>Warm-up</h2>
<p>Become familiar with the STT API basics by learning about:</p>
<ul>
- <li><a href="#create">Creating and Destroying STT Handles</a>
- <p>Create and destroy the STT handle.</p></li>
+ <li><a href="#init">Initializing the STT</a>
+ <p>Create an STT handle to use the STT library.</p></li>
<li><a href="#set">Setting and Unsetting Callbacks</a>
<p>Set and unset callbacks for obtaining notifications about recognition results, state changes, and errors.</p></li>
<p>Set the options and control recording for the STT.</p></li>
</ul>
-<h2 id="create" name="create">Creating and Destroying STT Handles</h2>
+<h2 id="init" name="init">Initializing the STT</h2>
-<p>To create and destroy STT handles:</p>
+<p>To initialize the STT:</p>
<ol><li>To use the functions and data types of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
<pre class="prettyprint">
#include <stt.h></pre>
</li>
-<li><p>To use the STT library, create an STT handle. The STT handle is used for other STT functions as a parameter. After creating the handle, the STT state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>.</p>
+<li><p>To use the STT library, create an STT handle.</p>
+<p>The STT handle is used in other STT functions as a parameter. After the handle creation, the STT state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">STT is not thread-safe and depends on the ecore main loop. Therefore, you must have the ecore main loop. Do not use STT in a thread.</td>
+ <td class="note">STT is not thread-safe and depends on the ecore main loop. Implement STT within the ecore main loop and do not use it in a thread.</td>
</tr>
</tbody>
</table>
</pre></li>
<li><p>When you no longer need the STT library, destroy the STT handle using the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function:</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function within the callback function, or the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">STT_ERROR_OPERATION_FAILED</span>.</td>
- </tr>
- </tbody>
- </table>
<pre class="prettyprint">
void
// Error handling
}
}
-</pre></li> </ol>
+</pre>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function in a callback. Within a callback, the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">STT_ERROR_OPERATION_FAILED</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+</li> </ol>
<h2 id="set" name="set" >Setting and Unsetting Callbacks</h2>
+<p>The enum values, as well as the parameter details, for the callback parameters are defined in the <span style="font-family: Courier New,Courier,monospace;">stt.h</span> header file.</p>
<p>To set and unset callbacks:</p>
-<ol><li>To use the functions and data types of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application. The enum values for the callback function parameter are defined in the header file, as well as the parameter details.
-<pre class="prettyprint">
-#include <stt.h></pre>
-</li>
-<li><p>The STT API provides various callback functions used to get the information including the recognition result, state changes, language changes, and errors. Call the callback functions in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span> state.</p>
+<ol>
+<li><p>The STT provides various callbacks to get the information, such as the recognition result, state changes, language changes, and errors.</p>
+<p>Set the callbacks in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span> state.</p>
<p>You can use the following callbacks:</p>
<ul>
<li>State changed
-<p>If you set the state changed callback for the STT, it is invoked when a state is changed by the STT.</p>
+<p>If you set the state changed callback, it is invoked when the STT state changes.</p>
<pre class="prettyprint">
+// Callback
void
state_changed_cb(stt_h stt, stt_state_e previous, stt_state_e current, void* user_data)
{
// Your code
}
+// Set
void
set_state_changed_cb(stt_h stt)
{
}
}
+// Unset
void
unset_state_changed_cb(stt_h stt)
{
</pre>
</li>
<li>Default language changed
-<p>The default language of the STT is changed either when the system language is changed, or through the STT settings. To get a notification of a language change, set a callback.</p>
+<p>The default language of the STT is changed either when the system language is changed, or through the STT settings. To get a notification of a language change, set the default language changed callback:</p>
<pre class="prettyprint">
+// Callback
void
default_language_changed_cb(stt_h stt, const char* previous_language,
const char* current_language, void* user_data)
// Your code
}
+// Set
void
set_default_language_changed_cb(stt_h stt)
{
}
}
+// Unset
void
unset_default_language_changed_cb(stt_h stt)
{
</li>
<li>Recognition result
-<p>To get the STT recognition result, set the recognition result callback function.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">stt_foreach_detailed_result()</span> function retrieves the time stamp of the current recognition result, so it can be called within the <span style="font-family: Courier New,Courier,monospace;">stt_recognition_result_cb()</span> callback function.</p>
+<p>To get the STT recognition result, set the recognition result callback.</p>
+<p>Within the callback, use the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_detailed_result()</span> function to trigger a result time callback that retrieves the time stamp of the current recognition result.</p>
<pre class="prettyprint">
+// Result time callback
bool
result_time_cb(stt_h stt, int index, stt_result_time_event_e event, const char* text,
long start_time, long end_time, void* user_data)
// Your code
}
+// Recognition result callback
void
recognition_result_cb(stt_h stt, stt_result_event_e event, const char** data,
int data_count, const char* msg, void* user_data)
// Your code
}
+// Set
void
set_recognition_result_cb(stt_h stt)
{
}
}
+// Unset
void
unset_recognition_result_cb(stt_h stt)
{
</li>
<li>Error
-<p>When an error occurs, the STT library sends an error message using a callback function:</p>
+<p>When an error occurs, the STT library sends an error message using a callback:</p>
<pre class="prettyprint">
+// Callback
void
error_cb(stt_h stt, stt_error_e reason, void* user_data)
{
// Your code
}
+// Set
void
set_error_cb(stt_h stt)
{
}
}
+// Unset
void
unset_error_cb(stt_h stt)
{
- Int ret;
- Ret = stt_unset_error_cb(stt);
- If (STT_ERROR_NONE != ret)
+ int ret;
+ ret = stt_unset_error_cb(stt);
+ if (STT_ERROR_NONE != ret)
{
// Error handling
}
<h2 id="get" name="get">Getting Information</h2>
-<p>To get information of the current STT state and the languages used:</p>
-<ol><li>To use the functions and data types of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
-<pre class="prettyprint">
-#include <stt.h></pre>
-</li>
-<li><p>You can obtain the current STT state, the list of supported languages, and the current language:</p>
+<p>To obtain the current STT state, the list of supported languages, and the current language:</p>
<ul>
-<li>Get the current state.
-<p>The STT state is changed by other functions. It is also applied as a precondition for each function. Get the current state using the <span style="font-family: Courier New,Courier,monospace;">stt_get_state()</span> function.</p>
+<li>Get the current state using the <span style="font-family: Courier New,Courier,monospace;">stt_get_state()</span> function.
+<p>The STT state is changed by various STT functions, and it is applied as a precondition for each function.</p>
<pre class="prettyprint">
void
get_state(stt_h stt)
</pre>
</li>
-<li>Obtain a list of languages supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_languages()</span> function. The <span style="font-family: Courier New,Courier,monospace;">stt_supported_language_cb</span> callback is invoked for each supported language repeatedly. You can continue or stop getting the supported languages through the return value of the callback function.
+<li>Obtain a list of languages supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_languages()</span> function.
+<p>The foreach function triggers a separate callback for each supported language. As long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the foreach function continues to loop over the supported languages.</p>
<pre class="prettyprint">
bool
supported_language_cb(stt_h stt, const char* language, void* user_data)
{
- return true; // Get next supported language
+ return true; // To continue to get the next supported language
- return false; // Stop
+ return false; // To stop the loop
}
void
</pre>
</li>
-<li>Get the default language using the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function. The recognition of the STT works for this default language if you do not set the language as a parameter of the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function. You can get a notification about the default language by changing the callback function that changes the default language.
+<li>Get the default language using the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function.
+<p>The STT recognition process works for this default language, if you do not set the language as a parameter of the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function.</p>
<pre class="prettyprint">
void
get_default_language(stt_h stt)
}
}
</pre>
+<p>You can get a notification about the default language changes by setting a default language changed callback.</p>
</li>
-<li>Obtain a list of engines supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_engines()</span> function. When this function is called, the <span style="font-family: Courier New,Courier,monospace;">stt_supported_engine_cb</span> callback is invoked repeatedly for each supported engine. You can continue or stop getting the supported engine through the return value of the callback function.
+<li>Obtain a list of engines supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_engines()</span> function.
+<p>The foreach function triggers a separate callback for each supported engine. As long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the foreach function continues to loop over the supported engines.</p>
<pre class="prettyprint">
bool
supported_engine_cb(stt_h stt, const char* engine_id, const char* engine_name,
void* user_data)
{
- return true; // Get next supported language
+ return true; // To continue to get the next supported engine
- return false; // Stop
+ return false; // To stop the loop
}
void
</pre>
</li>
-<li>Get or set the current engine, which is used for the STT recognition, using the <span style="font-family: Courier New,Courier,monospace;">stt_set_engine()</span> and <span style="font-family: Courier New,Courier,monospace;">stt_get_engine()</span> functions.
+<li>Get or set the current engine for the STT recognition using the <span style="font-family: Courier New,Courier,monospace;">stt_set_engine()</span> and <span style="font-family: Courier New,Courier,monospace;">stt_get_engine()</span> functions.
<p>The supported language, silence detection, and supported recognition types depend on the STT engine.</p>
<pre class="prettyprint">
// Get the engine
</pre>
</li>
-<li>Get the supported recognition types. Check whether the recognition type defined in the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file is supported.
-<p>The normal recognition type, <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE</span>, means that the whole recognition result is sent at the end of recognition and that the STT engine supports it. To get a partial recognition result, use the <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE_PARTIAL</span> recognition type, if it is supported by the current engine.</p>
+<li>Check whether a recognition type defined in the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file is supported by the current engine.
+<p>The normal recognition type, <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE</span>, means that the whole recognition result is sent at the end of the recognition process. The <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE_PARTIAL</span> recognition type is used to get a partial recognition result.</p>
<pre class="prettyprint">
void
check_supported_recognition_type(stt_h stt)
int ret;
bool support;
ret = stt_is_recognition_type_supported(stt,
- STT_RECOGNITION_TYPE_FREE_PARTIAL, &support);
+ STT_RECOGNITION_TYPE_FREE_PARTIAL,
+ &support);
if (STT_ERROR_NONE != ret)
{
// Error handling
}
</pre>
</li>
-</ul></li></ol>
+</ul>
<h2 id="prepare" name="prepare">Connecting and Disconnecting the STT</h2>
<p>To operate the STT:</p>
- <ol><li>To use the functions and data types of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
-<pre class="prettyprint">
-#include <stt.h></pre>
-</li>
-<li><p>After you create the STT handle, connect the background STT daemon:</p>
-<ul>
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">stt_prepare()</span> function is asynchronous and the STT state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>:</p>
+ <ol>
+<li><p>After you create the STT handle, connect the background STT daemon with the <span style="font-family: Courier New,Courier,monospace;">stt_prepare()</span> function.</p>
+<p>The function is asynchronous and the STT state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
<pre class="prettyprint">
void
</table>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">stt_unprepare()</span> function disconnects the STT, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>:</p>
+<p>When the connection is no longer needed, use the <span style="font-family: Courier New,Courier,monospace;">stt_unprepare()</span> function to disconnect the STT, and change the state to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>:</p>
<pre class="prettyprint">
void
}
}</pre>
</li>
-</ul>
-</li>
</ol>
<h2 id="option" name="option">Setting Options and Controlling Recording</h2>
<p>To set the STT options and control recording:</p>
-<ol><li>To use the functions and data types of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
-<pre class="prettyprint">
-#include <stt.h></pre>
-</li>
-<li><p>You can set the following STT options:</p>
<ul>
-<li>Set silence detection.
-<p>After the STT starts recognizing sound, some STT engines can detect silence when the sound input from the user ends. If silence detection is enabled, the STT library stops recognition automatically and sends the result. Otherwise, you can manually stop it using the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function.</p>
-<p>If you set the silence detection as automatic, STT works as a global STT setting. This option must be set in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
+<li>Set the silence detection.
+<p>After the STT starts recognizing sound, some STT engines can detect silence when the sound input from the user ends. If the silence detection is enabled, the STT library stops recognition automatically and sends the result. Otherwise, you can manually stop the recognition process using the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function.</p>
+<p>If you set the silence detection as automatic, STT works according to the global STT setting. This option must be set in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
<pre class="prettyprint">
void
set_silence_detection(stt_h stt, stt_option_silence_detection_e type)
{
int ret;
- // The default type is STT_OPTION_SILENCE_DETECTION_AUTO
+ // Default type is STT_OPTION_SILENCE_DETECTION_AUTO
ret = stt_set_silence_detection(stt, type);
if (STT_ERROR_NONE != ret)
{
</li>
<li>Set or unset the start sound.
-<p>To play a sound before the STT recognition starts, call the <span style="font-family: Courier New,Courier,monospace;">set_start_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
+<p>To play a sound before the STT recognition starts, call the <span style="font-family: Courier New,Courier,monospace;">stt_set_start_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The sound file path must be a full path. The sound type supports only the WAV format.</td>
+ <td class="note">The sound file path must be a full path. Only WAV format sound files are supported.</td>
</tr>
</tbody>
</table>
</li>
<li>Set or unset the stop sound.
-<p>To play a sound when the STT stops, use the <span style="font-family: Courier New,Courier,monospace;">stt_set_stop_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state:</p>
+<p>To play a sound when the STT recognition stops, use the <span style="font-family: Courier New,Courier,monospace;">stt_set_stop_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state:</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The sound file path must be a full path. The sound type supports only the WAV format.</td>
+ <td class="note">The sound file path must be a full path. Only WAV format sound files are supported.</td>
</tr>
</tbody>
</table>
</pre>
</li>
-<li>Start, stop, and cancel recognition:
+<li>Start, stop, and cancel the recognition:
<ul>
- <li><p>To start recording, use the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function. The connected STT daemon starts recording, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_RECORDING</span>.</p>
+ <li><p>To start recording, use the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function.</p>
+ <p>The connected STT daemon starts recording, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_RECORDING</span>.</p>
<table class="note">
<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">If the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function fails, check the error code. You can get the following error codes:
- <ul>
- <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_RECORDER_BUSY</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_OUT_OF_NETWORK</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_INVALID_STATE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_INVALID_LANGUAGE</span></li>
- </ul></td>
+ <td class="note">If the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function fails, check the error code and take appropriate action.</td>
</tr>
</tbody>
- </table> <p>The language and recognition type must be supported by the current STT engine. If you set <span style="font-family: Courier New,Courier,monospace;">NULL</span> as the language parameter, the STT default language is selected using the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function.</p>
+ </table>
+ <p>The language and recognition type must be supported by the current STT engine. If you set <span style="font-family: Courier New,Courier,monospace;">NULL</span> as the language parameter, the STT default language is used based on the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function.</p>
<pre class="prettyprint">
void
start(stt_h stt, const char* language, const char* type)
{
int ret;
- ret = stt_start(stt, language, type); // The default language is NULL
+ ret = stt_start(stt, language, type); // Default language is NULL
if (STT_ERROR_NONE != ret)
{
// Error handling
</pre>
</li>
-<li><p>When the STT recording is in process, you can retrieve the current recording volume using the <span style="font-family: Courier New,Courier,monospace;">stt_get_recording_volume()</span> function. The volume value is retrieved periodically with the short-term recorded sound data as dB (decibels). The STT volume normally has a negative value, and 0 is the maximum value.</p>
+<li><p>While the STT recording is in process, you can retrieve the current recording volume using the <span style="font-family: Courier New,Courier,monospace;">stt_get_recording_volume()</span> function.</p>
+<p>The volume value is retrieved periodically with the short-term recorded sound data as dB (decibels). The STT volume normally has a negative value, and 0 is the maximum value.</p>
<pre class="prettyprint">
void
get_volume(stt_h stt)
</pre>
</li>
<li>
-<p>To stop recording and get the recognition result, use the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function. The state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_PROCESSING</span>. The result is sent as a recognition result callback and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
+<p>To stop the recording and get the recognition result, use the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function.</p>
+<p>The recording stops and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_PROCESSING</span>. When the recognition result has been processed, the result is sent in the recognition result callback and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
<pre class="prettyprint">
void
stop(stt_h stt)
</pre>
</li>
<li>
-<p>To stop recording without getting the result, use the <span style="font-family: Courier New,Courier,monospace;">stt_cancel()</span> function. It changes the state to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
+<p>To cancel the recording without getting the result, use the <span style="font-family: Courier New,Courier,monospace;">stt_cancel()</span> function.</p>
+<p>The state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
<pre class="prettyprint">
void
cancel(stt_h stt)
</li>
</ul>
</li>
-</ul></li></ol>
+</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<ul class="toc">
<li>Set-up
<ul class="toc">
- <li><a href="#create">Creating and Destroying TTS Handles</a></li>
+ <li><a href="#init">Initializing the TTS</a></li>
<li><a href="#set">Setting and Unsetting Callbacks</a></li>
<li><a href="#get">Getting Information</a></li>
<li><a href="#mode">Getting and Setting the Mode</a></li>
</ul>
</li>
<li><a href="#text">Adding Text</a></li>
- <li><a href="#start">Starting, Stopping, and Pausing Playback</a>
+ <li><a href="#control">Controlling the Playback</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<h1>TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data</h1>
-<p>This tutorial demonstrates how you can synthesize text into sound data as utterance and play, pause, and stop it.</p>
+<p>This tutorial demonstrates how you can synthesize text into sound data as utterances, and then play the sound data.</p>
<h2>Warm-up</h2>
<p>Become familiar with the TTS API basics by learning about:</p>
<ul>
<li>Set-up
<ul>
- <li><a href="#create">Creating and Destroying TTS Handles</a>
- <p>Create and destroy the TTS handle.</p></li>
+ <li><a href="#init">Initializing the TTS</a>
+ <p>Create a TTS handle to use the TTS library.</p></li>
<li><a href="#set">Setting and Unsetting Callbacks</a>
- <p>Set and unset callbacks for obtaining notifications, such as when playing utterance is started or completed.</p></li>
+ <p>Set and unset callbacks for obtaining notifications, such as when playing an utterance is started or completed.</p></li>
<li><a href="#get">Getting Information</a>
<p>Get information on the supported voice, current state, and voice.</p></li>
</li>
<li><a href="#text">Adding Text</a>
-<p>Request to add text for TTS play.</p></li>
+<p>Request to add text for the TTS playback.</p></li>
-<li><a href="#start">Starting, Stopping, and Pausing Playback</a>
-<p>Start TTS playback, stop, and pause it.</p></li>
+<li><a href="#control">Controlling the Playback</a>
+<p>Start, pause, and stop the TTS playback.</p></li>
</ul>
-<h2 id="create" name="create">Creating and Destroying TTS Handles</h2>
+<h2 id="init" name="init">Initializing the TTS</h2>
-<p>To create and destroy TTS handles:</p>
+<p>To initialize the TTS:</p>
<ol><li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
<pre class="prettyprint">
#include <tts.h></pre>
</li>
-<li><p>To use the TTS library, create a TTS handle. The TTS handle is used for other TTS functions as a parameter. After the creation, the TTS state changes to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
+<li><p>To use the TTS library, create a TTS handle.</p>
+<p>The TTS handle is used in other TTS functions as a parameter. After the handle creation, the TTS state changes to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">TTS is not thread-safe and depends on the ecore main loop. Therefore, you must have the ecore main loop. Do not use TTS in a thread.</td>
+ <td class="note">TTS is not thread-safe and depends on the ecore main loop. Implement TTS within the ecore main loop and do not use it in a thread.</td>
</tr>
</tbody>
</table>
</li>
<li><p>When you no longer need the TTS library, destroy the TTS handle using the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function:</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function within the callback function, or the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">TTS_ERROR_OPERATION_FAILED</span>.</td>
- </tr>
- </tbody>
- </table>
+
<pre class="prettyprint">
void
// Error handling
}
}
-</pre></li></ol>
+</pre>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function in a callback function. Within a callback, the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">TTS_ERROR_OPERATION_FAILED</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+</li></ol>
<h2 id="set" name="set">Setting and Unsetting Callbacks</h2>
+<p>The enum values, as well as the parameter details, for the callback parameters are defined in the <span style="font-family: Courier New,Courier,monospace;">tts.h</span> header file.</p>
<p>To set and unset callbacks:</p>
-<ol><li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application. The enum values for the parameters of the callback functions are defined in the header file. You can also find the parameter details in the file.
-<pre class="prettyprint">
-#include <tts.h></pre>
-</li>
-<li><p>The TTS API is used to get information, such as changing states and starting a completing utterance. Call the setting and unsetting callback functions in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state. </p>
+<ol>
+<li><p>The TTS provides various callbacks to get information, such as the state changes and start or completion of an utterance.</p>
+<p>Set the callbacks in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state. </p>
<p>You can use the following callbacks:</p>
<ul>
<li>State changed
-<p>If you set the state change callback for the TTS, it is invoked when the TTS state changes.</p>
+<p>If you set the state change callback, it is invoked when the TTS state changes.</p>
<pre class="prettyprint">
+// Callback
void
state_changed_cb(tts_h tts, tts_state_e previous, tts_state_e current, void* user_data)
{
// Your code
}
+// Set
void
set_state_changed_cb(tts_h tts)
{
}
}
+// Unset
void
unset_state_changed_cb(tts_h tts)
{
</li>
<li>Default voice changed
-<p>In the TTS library, the voice includes the language used and the voice type, such as male or female. The default voice of the TTS is changed either when the system language is changed, or from the TTS settings. To get a notification of this change, use the following functions.</p>
+<p>In the TTS library, the voice includes the language used and the voice type, such as male or female. The default voice of the TTS is changed either when the system language is changed, or through the TTS settings. To get a notification of a voice change, set the default voice changed callback:</p>
<pre class="prettyprint">
+// Callback
void
default_voice_changed_cb(tts_h tts, const char* previous_language, int previous_voice_type,
const char* current_language, int current_voice_type, void* user_data)
// Your code
}
+// Set
void
set_default_voice_changed_cb(tts_h tts)
{
}
}
+// Unset
void
unset_default_language_changed_cb(tts_h tts)
{
</li>
<li>Utterance started or completed
-<p>If you add text in the TTS, that text is handled as an utterance and it obtains its own ID. After you request starting, the text is synthesized by an engine and played out. To get a notification when an utterance is started or completed, use the following functions.</p>
+<p>If you add text in the TTS, that text is handled as an utterance and it obtains its own ID. After you request the TTS process to start, the text is synthesized by an engine and played out. To get a notification when an utterance is started or completed, set the respective callbacks:</p>
<pre class="prettyprint">
+// Started callback
void
utterance_started_cb(tts_h tts, int utt_id, void* user_data)
{
// Your code
}
+// Completed callback
void
utterance_completed_cb(tts_h tts, int utt_id, void* user_data)
{
// Your code
}
+// Set
void
set_utterance_cb(tts_h tts)
{
}
}
+// Unset
void
unset_utterance_cb(tts_h tts)
{
</li>
<li>Error
-<p>When an error occurs, the TTS library sends a message using the following callback function:</p>
+<p>When an error occurs, the TTS library sends a message using a callback:</p>
<pre class="prettyprint">
+// Callback
void
error_cb(tts_h tts, int utt_id, tts_error_e reason, void* user_data)
{
// Your code
}
+// Set
void
set_error_cb(tts_h tts)
{
}
}
+// Unset
void
unset_error_cb(tts_h tts)
{
<h2 id="get" name="get">Getting Information</h2>
-<p>To get information of the current TTS state and the voices used:</p>
-<ol><li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
-<pre class="prettyprint">
-#include <tts.h></pre>
-</li>
-<li><p>You can obtain the current state, the supported voice list, and the current voice:</p>
+<p>To obtain the current state, the supported voice list, and the current voice:</p>
<ul>
-<li>Get the current state.
-<p>The TTS state is changed by other functions, and it is also applied as a precondition of each API. To get the current state, use the <span style="font-family: Courier New,Courier,monospace;">tts_get_state()</span> function.</p>
+<li>Get the current state using the <span style="font-family: Courier New,Courier,monospace;">tts_get_state()</span> function.
+<p>The TTS state is changed by various TTS functions, and it is applied as a precondition of each function.</p>
<pre class="prettyprint">
void
get_state(tts_h tts)
</pre>
</li>
-<li>Obtain a list of voices supported by the TTS using the <span style="font-family: Courier New,Courier,monospace;">tts_foreach_supported_voices()</span> function. The <span style="font-family: Courier New,Courier,monospace;">tts_supported_voice_cb</span> callback is invoked repeatedly for each supported voice. You can continue or stop getting the supported voice by the return value of the callback function.
+<li>Obtain a list of voices supported by the TTS using the <span style="font-family: Courier New,Courier,monospace;">tts_foreach_supported_voices()</span> function.
+<p>The foreach function triggers a separate callback for each supported voice. As long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the foreach function continues to loop over the supported voices.</p>
<pre class="prettyprint">
bool
supported_voice_cb(tts_h tts, const char* language, int voice_type, void* user_data)
{
- return true; // Get next supported language
+ return true; // To continue to get the next supported language
- return false; // Stop
+ return false; // To stop the loop
}
void
</pre>
</li>
-<li>Get the default voice using the <span style="font-family: Courier New,Courier,monospace;">tts_get_default_voice()</span> function. If you do not set the language and the voice type as parameters of the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> function, the TTS synthesizes the text using the default voice. To get notified about the default voice changing, use the following functions.
+<li>Get the default voice using the <span style="font-family: Courier New,Courier,monospace;">tts_get_default_voice()</span> function.
+<p>The TTS synthesizes the text using the default voice, if you do not set the language and the voice type as parameters of the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> function.</p>
<pre class="prettyprint">
void
get_default_voice(tts_h tts)
}
}
</pre>
+<p>You can get a notification about the default voice changes by setting a default voice changed callback.</p>
</li>
-</ul></li></ol>
+</ul>
<h2 id="mode" name="mode">Getting and Setting the Mode</h2>
-<p>To get and set the mode:</p>
-<ol><li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
-<pre class="prettyprint">
-#include <tts.h></pre>
-</li>
-<li><p>There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_DEFAULT</span>, used for normal applications such as eBooks. If you set this mode and play your text, it can be interrupted when other sounds, such as ringtone or other TTS sounds, are played. Use these functions in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state.</p>
-
- <table class="note">
+<p>There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_DEFAULT</span>, used for normal applications such as eBooks. If you set this mode and play your text, it can be interrupted when other sounds, such as ringtone or other TTS sounds, are played.</p>
+ <table class="note">
<tbody>
<tr>
<th class="note">Note</th>
</tr>
</tbody>
</table>
+<p>Get and set the mode in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state:</p>
+
<pre class="prettyprint">
void
// Error handling
}
}
-</pre></li></ol>
+</pre>
<h2 id="prepare" name="prepare">Connecting and Disconnecting TTS</h2>
<p>To operate the TTS:</p>
-<ol><li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
-<pre class="prettyprint">
-#include <tts.h></pre>
-</li>
+<ol>
-<li><p>After you create the TTS handle, connect the background TTS daemon. The daemon synthesizes the text with the engine and plays the resulting sound data:</p>
-<ul>
-<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function is asynchronous, and the state of the TTS is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+<li><p>After you create the TTS handle, connect the background TTS daemon with the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function.</p>
+<p>The daemon synthesizes the text with the engine and plays the resulting sound data. The function is asynchronous and the TTS state changes to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
<pre class="prettyprint">
void
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">If you can get the error callback after using the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function, the TTS is not available.</td>
+ <td class="note">If you get the error callback after calling the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function, TTS is not available.</td>
</tr>
</tbody>
</table>
</li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_unprepare()</span> function is used for disconnection, and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
+<li><p>When the connection is no longer needed, use the <span style="font-family: Courier New,Courier,monospace;">tts_unprepare()</span> function to disconnect the TTS and change the state to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>:</p>
<pre class="prettyprint">
void
}
</pre>
</li>
-
-</ul></li></ol>
+</ol>
<h2 id="text" name="text">Adding Text</h2>
+<p>There are defined values, <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_TYPE_AUTO</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_SPEED_AUTO</span> for following the default TTS setting. Those values, and the minimum and maximum limits for the speed, are defined in the <span style="font-family: Courier New,Courier,monospace;">tts.h</span> header file.</p>
<p>To add text:</p>
-<ol><li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application. There are defined values, <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_TYPE_AUTO</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_SPEED_AUTO</span> for following the default TTS setting. The minimum and maximum limits for the speed are also defined in the header file.
-<pre class="prettyprint">
-#include <tts.h></pre>
-</li>
-<li>To manage text:
<ul>
<li>
<p>You can request the TTS library to read your own text using the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> function. The TTS library manages added text using queues, so it is possible to add several texts simultaneously. Each obtained text receives an utterance ID, which is used for synthesizing and playing the sound data.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">If the added text is too long, some engines need a long time for synthesis. It is recommended to add a proper length text clip.</td>
+ <td class="note">If the added text is too long, some engines need a long time for synthesis. It is recommended to only use proper length text clips.</td>
</tr>
</tbody>
</table>
-<p>When you do not set the language and use <span style="font-family: Courier New,Courier,monospace;">NULL</span> for the language, the default language is used for synthesizing text.</p>
+<p>When you do not set the language and use <span style="font-family: Courier New,Courier,monospace;">NULL</span> for it, the default language is used for synthesizing text.</p>
<p>You can add text at any point after the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function changes the state to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
<pre class="prettyprint">
</li>
<li>
-<p>There is a length limit for the added text in the engine. To retrieve the maximum value, use the <span style="font-family: Courier New,Courier,monospace;">tts_get_max_text_size()</span> function in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span> state.</p>
+<p>There is a length limit for the added text in the engine.</p>
+<p>To retrieve the maximum value, use the <span style="font-family: Courier New,Courier,monospace;">tts_get_max_text_size()</span> function in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span> state:</p>
<pre class="prettyprint">
void
get_maximum_text_size(tts_h tts)
}
</pre>
</li>
-</ul></li></ol>
+</ul>
-<h2 id="start" name="start">Starting, Stopping, and Pausing Playback</h2>
+<h2 id="control" name="control">Controlling the Playback</h2>
-<p>To start, pause, and stop playback:</p>
-<ol><li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
-<pre class="prettyprint">
-#include <tts.h></pre>
-</li>
-<li><p>To start synthesizing the text added in the queue and play the resulting sound data in sequence, use the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function. The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span>. The playback continues until you call the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> or the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function.</p>
+<p>To start, pause, and stop the playback:</p>
+<ul>
+<li><p>To start synthesizing the text added in the queue and play the resulting sound data in sequence, use the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function.</p>
+<p>The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span>, and the playback continues until you call the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> or the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function.</p>
<p>If there is no text in the queue, the TTS waits for text to be added in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span> state. In that case, when you add text, the TTS starts synthesizing and playing it immediately. The TTS state need not change to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span> state before using the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> function.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">If you get the TTS state changed callback in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span> without the TTS API call, prepare the TTS state. The TTS state can change if other applications request TTS play, the audio session requests TTS pause, or the TTS engine changes.</td>
+ <td class="note">If you get the TTS state changed callback in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span> state without a TTS function call, prepare the TTS state. The TTS state can change if other applications request TTS play, the audio session requests TTS pause, or the TTS engine changes.</td>
</tr>
</tbody>
</table>
}
}
</pre>
-
-<p>If you want to pause the process, use the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function to change the state to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PAUSED</span>. To resume playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function.</p>
+</li>
+<li>
+<p>To pause the playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function.</p>
+<p>The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PAUSED</span>. To resume playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function.</p>
<pre class="prettyprint">
void
pause(tts_h tts)
}
}
</pre>
-<p>To stop the playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> function. All the texts in the queue are removed. The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+</li>
+<li>
+<p>To stop the playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> function.</p>
+<p>All the texts in the queue are removed, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
<pre class="prettyprint">
void
stop(tts_h tts)
// Error handling
}
}
-</pre></li></ol>
+</pre></li></ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<li><a href="#init">Initializing the Voice Control</a>
<p>Initialize the Voice control elementary library and create a handle.</p></li>
<li><a href="#callback">Monitoring Language Changes</a>
- <p>Set and unset a callback to get notifications when the language changes.</p></li>
+ <p>Set and unset a callback to get notifications when the system or application language changes.</p></li>
<li><a href="#info">Retrieving Voice Control Information</a>
<p>Get information about supported languages, widgets, and actions.</p></li>
<li><a href="#command_hint">Managing Commands and Hints</a>
}
</pre>
</li>
-<li>Create a handle for each UI component for which you want to set a command and hint. Use the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_object()</span> function to create a handle for Evas_Objects, and the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_item()</span> function for Elm_Object_Items.
+<li>Create a handle for each UI component for which you want to set a command and hint.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_object()</span> function to create a handle for <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> instances, and the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_item()</span> function for <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instances.</p>
<pre class="prettyprint">
void
create_vc_elm_handler()
}
}
</pre></li>
-<li>Get the languages supported by Voice control elementary library with a callback function that runs for each language separately.
-<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported languages.</p>
+<li>Get the languages supported by the Voice control elementary library with a foreach function that triggers a separate callback for each language.
+<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported languages.</p>
<pre class="prettyprint">
bool
supported_language_cb(const char *language, void* user_data)
{
return true; // To continue to get the next language
- return false; // To stop
+ return false; // To stop the loop
}
void
}
}
</pre></li>
-<li>Get the UI components supported by Voice control elementary library with a callback function that runs for each UI component separately.
-<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported UI components.</p>
+<li>Get the UI components supported by the Voice control elementary library with a foreach function that triggers a separate callback for each UI component.
+<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported UI components.</p>
<pre class="prettyprint">
void
widget_cb(const char *widget, void *user_data)
{
return true; // To continue to get the next UI component
- return false; // To stop
+ return false; // To stop the loop
}
void
}
}
</pre></li>
-<li>Get the actions supported by Voice control elementary library for specific UI components with a callback function that runs for each action separately.
-<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported actions.</p>
-<p>To translate an actions to corresponding command parameters, use the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_action_command()</span> function.</p>
+<li>Get the actions supported by the Voice control elementary library for specific UI components with a foreach function that triggers a separate callback for each action.
+<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported actions.</p>
+<p>To translate an action to corresponding command parameters, use the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_action_command()</span> function.</p>
<pre class="prettyprint">
void
action_cb(const char *action, void *user_data)
return true; // To continue to get the next action
- return false; // To stop
+ return false; // To stop the loop
}
void
set_supported_action_cb()
{
int ret;
- // Elm_Button is an example, this can be obtained using vc_elm_foreach_supported_widgets callback
+ // Elm_Button is an example, it can be obtained using vc_elm_foreach_supported_widgets callback
ret = vc_elm_foreach_supported_actions("Elm_Button", action_cb, NULL);
if (VC_ELM_ERROR_NONE != ret)
{
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The voice control feature is not thread safe and depends on the ecore main loop. Implement voice control within the ecore main loop and do not use it in a thread.</td>
+ <td class="note">The voice control feature is not thread-safe and depends on the ecore main loop. Implement voice control within the ecore main loop and do not use it in a thread.</td>
</tr>
</tbody>
</table>
</li>
<li>Prepare the Voice control service with the <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function, which connects the background Voice control daemon. The daemon records and recognizes audio data and converts sound to text.
-<p>The <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function is asynchronous, and when the preparation succeeds, the voice control state changes from <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span> to <span style="font-family: Courier New,Courier,monospace">VC_STATE_READY</span>. If the <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function fails, the error callback is triggered.</p>
+
<pre class="prettyprint">
void
}
}
</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function is asynchronous, and when the preparation succeeds, the voice control state changes from <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span> to <span style="font-family: Courier New,Courier,monospace">VC_STATE_READY</span>. If the <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function fails, the error callback is triggered.</p>
</li>
-<li>When voice control is no longer needed, unprepare and deinitialize it:
+<li>When the voice control is no longer needed, unprepare and deinitialize it:
<pre class="prettyprint">
void
unprepared_vc()
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Do not call the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function in a callback function. Within a callback function, the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace">VC_ERROR_OPERATION_FAILED</span>.</td>
+ <td class="note">Do not call the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function in a callback. Within a callback, the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace">VC_ERROR_OPERATION_FAILED</span>.</td>
</tr>
</tbody>
</table>
<ul>
<li>Set the state change callback to be invoked when the voice control state changes:
<pre class="prettyprint">
+// Callback
void
state_changed_cb(vc_state_e previous, vc_state_e current, void* user_data)
{
// Your code
}
+// Set
void
set_state_changed_cb()
{
// Error handling
}
}
+
+// Unset
void
unset_state_changed_cb()
{
</li>
<li>Set the service state change callback to be invoked when the Voice control service state changes:
<pre class="prettyprint">
+// Callback
void
__service_state_changed_cb(vc_service_state_e previous, vc_service_state_e current, void* user_data)
{
// Your code
}
+// Set
void
set_service_state_changed_cb()
{
}
}
+// Unset
void
unset_service_state_changed_cb()
{
<li>Set the current language change callback to be invoked when the system or application language changes:
<pre class="prettyprint">
+// Callback
void
__current_language_changed_cb(const char* previous, const char* current, void* user_data)
{
// Your code
}
+// Set
void
set_current_language_changed_cb()
{
}
}
+// Unset
void
unset_current_language_changed_cb()
{
<p>To get the command, use the Voice control APIs with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list</span> parameter, which is a list of recognized commands. The <span style="font-family: Courier New,Courier,monospace">result</span> parameter contains the recognized text.</p>
<pre class="prettyprint">
+// Callback
void
__result_cb(vc_result_event_e event, vc_cmd_list_h vc_cmd_list, const char* result, void* user_data)
{
return;
}
+// Set
void
set_result_cb()
{
}
}
+// Unset
void
unset_result_cb()
{
</pre></li>
<li>Set the error callback to be invoked when an error occurs in the voice control process:
<pre class="prettyprint">
+// Callback
void
__error_cb(vc_error_e reason, void* user_data)
{
// Your code
}
+// Set
void
set_error_cb(vc_h vc)
{
}
}
+// Unset
void
unset_error_cb(vc_h vc)
{
}
}
</pre></li>
-<li>Get the supported languages with a callback function that runs for each language separately.
-<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported languages.</p>
+<li>Get the supported languages with a foreach function that triggers a separate callback for each language.
+<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported languages.</p>
<pre class="prettyprint">
bool
supported_language_cb(const char* language, void* user_data)
{
return true; // To continue to get the next language
- return false; // To stop
+ return false; // To stop the loop
}
void
</pre>
</li>
<li>Add the command to the command list.
-<p>If necessary, you can also remove commands from the command list. After you remove the command, if you no longer use it, destroy the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</p>
+<p>If necessary, you can also remove commands from the command list. After you remove a command, if you no longer use it, destroy the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</p>
<pre class="prettyprint">
void
add_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
}
</pre>
-<p>To get the commands you have added to the command list, use the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_foreach_commands()</span> function to get all commands with a callback function at once, or the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function to retrieve the commands without a callback function.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When you get the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function, do not release the command handle. To release the command handle, call the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_remove()</span> function before the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</td>
- </tr>
- </tbody>
- </table>
+<p>To retrieve the commands you have added to the command list:</p>
+<ul>
+<li>You can use the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_foreach_commands()</span> function to get each command within a callback function:
<pre class="prettyprint">
bool
__vc_get_command_cb(vc_cmd_h vc_command, void* user_data)
// Error handling
}
}
+</pre>
+</li>
+<li>You can use the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function to get the current command in an output parameter.
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">When you get the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function, do not release it. To release the command handle, call the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_remove()</span> function before the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint">
void
get_commands(vc_cmd_list_h vc_cmd_list)
{
} while (VC_ERROR_ITERATION_END != ret);
}
</pre>
-
+</li>
+</ul>
</li>
<li>Register the commands for recognition by setting the command list to the voice control.
<p>If you want to update registered commands, set the command list again with the updated commands.</p>
<li>When no longer needed, unset the command list, and destroy the command and command list handles.
<p>When you destroy the command list, all the commands in the command list are not automatically released. If you no longer need the commands, set the second parameter of the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_destroy()</span> function to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
<pre class="prettyprint">
+// Unset the command list
void
unset_command(int type)
{
}
}
+// Destroy the command handle
void
destroy_command(vc_cmd_h vc_cmd)
{
}
}
+// Destroy the command list handle
void
destroy_command_list(vc_cmd_list_h vc_cmd_list)
{
<ul class="toc">
<li><a href="#init">Initializing the EWK WebKit</a>
</li>
- <li><a href="#window">Creating and Deleting a Window Object</a>
+ <li><a href="#window">Creating a Window Object</a>
</li>
- <li><a href="#layout">Setting the Window Layout</a>
- </li>
- <li><a href="#view">Setting the Window View</a>
+ <li><a href="#layout">Setting the Window Layout and View</a>
</li>
<li><a href="#keymouse">Handling Key and Mouse Events</a>
</li>
- <li><a href="#show">Showing a Window and Setting the Focus</a>
+ <li><a href="#show">Showing the Window and Setting the Focus</a>
</li>
<li><a href="#helper">Finding a Window</a>
</li>
<ul>
<li><a href="#init">Initializing the EFL WebKit</a>
<p>Initialize the EFL WebKit (EWK) for use.</p></li>
- <li><a href="#window">Creating and Deleting a Window Object</a>
- <p>Create and delete a window object.</p></li>
- <li><a href="#layout">Setting the Window Layout</a>
- <p>Create the window layout.</p></li>
- <li><a href="#view">Setting the Window View</a>
- <p>Set the window smart view and settings.</p></li>
+ <li><a href="#window">Creating a Window Object</a>
+ <p>Create a window object.</p></li>
+ <li><a href="#layout">Setting the Window Layout and View</a>
+ <p>Create the window layout and set the window smart view and settings.</p></li>
<li><a href="#keymouse">Handling Key and Mouse Events</a>
<p>Handle the key and mouse event.</p></li>
- <li><a href="#show">Showing a Window and Setting the Focus</a>
+ <li><a href="#show">Showing the Window and Setting the Focus</a>
<p>Show a window and set the focus.</p></li>
<li><a href="#helper">Finding a Window</a>
<p>Use the helper functions to find a window.</p></li>
<h2 id="init" name="init">Initializing the EWK WebKit</h2>
<p>To initialize the EWK WebKit:</p>
-<ol><li>To use the functions and data types of the WebView API (in <a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><Ecore.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Evas.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Getopt.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eet.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eina.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Evas.h></span>, <span style="font-family: Courier New,Courier,monospace;"><EWebKit.h></span>, and <span style="font-family: Courier New,Courier,monospace;"><app.h></span> header files in your application:
+<ol><li>To use the functions and data types of the WebView API (in <a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><EWebKit.h></span> header file in your application:
<pre class="prettyprint">
#include <Ecore.h>
#include <Ecore_Evas.h>
#include <Evas.h>
#include <EWebKit.h>
#include <app.h>
-</pre></li>
-<li>To use the EWK API, an application needs the following privileges:
+</pre>
+<p>The sample browser created in this tutorial also requires the <span style="font-family: Courier New,Courier,monospace;"><Ecore.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Evas.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Getopt.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eet.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eina.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Evas.h></span>, and <span style="font-family: Courier New,Courier,monospace;"><app.h></span> header files.</p>
+
+</li>
+<li>To use the sample browser, set the following privileges in the manifest file of the application:
<table>
<caption>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span></td>
- <td>Allows the application to open another application conditionally.</td>
+ <td>Allows the application to launch another application conditionally.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.write</span></td>
- <td>Allows the application to create, update and delete content.</td>
+ <td>Allows the application to create, update, and delete content.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/internet</span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span></td>
- <td>Allows the application to provide user notifications, such as messages and badges</td>
+ <td>Allows the application to provide user notifications, such as messages and badges.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/location</span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/externalstorage</span></td>
- <td>Allows the application to access, read and write to the external storage.</td>
+ <td>Allows the application to access, read, and write to the external storage.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/display</span></td>
</tr>
</tbody>
</table> </li>
-<li>The sample browser uses several Evas objects to build the browser UI. To easily manage the UI elements, use the <span style="font-family: Courier New,Courier,monospace">Browser_window</span> data structure. The browser window data is stored in a <span style="font-family: Courier New,Courier,monospace">Browser_window</span> structure that contains 2 <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> instances.
-
+<li>The sample browser uses several Evas objects to build the browser UI. To easily manage the UI elements, store the browser window data (including the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> instances) in the <span style="font-family: Courier New,Courier,monospace">Browser_window</span> data structure:
<pre class="prettyprint">
typedef struct
_Browser_Window
}
</pre></li>
-<li>To create a window, call the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function in the <span style="font-family: Courier New,Courier,monospace">br_app_create()</span> function.
-
+<li>To create a window, call the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function in the <span style="font-family: Courier New,Courier,monospace">br_app_create()</span> life-cycle callback function:
<pre class="prettyprint">
window = window_create(NULL, 0, 0, EINA_FALSE);
</pre></li></ol>
- <h2 id="window" name="window">Creating and Deleting a Window Object</h2>
+ <h2 id="window" name="window">Creating a Window Object</h2>
-<p>To create and delete a window object:</p>
+<p>To create a window object:</p>
<ol>
-<li>To create a window object, use the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function.
-
-<p>You can add a smart callback to your window using the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function.</p>
-
-<p>The function adds a callback to the event specified by the event on the smart object (smart event).</p>
+<li>To create a window object, use the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function:
<pre class="prettyprint">
static Browser_Window*
// Create window
window->elm_window = elm_win_add(NULL, "minibrowser-window", ELM_WIN_BASIC);
- evas_object_smart_callback_add(window->elm_window, "delete,request", on_window_deletion, &window);
-}
</pre></li>
-<li>An application also needs a callback fired for the window deletion event. In the callback's body of implementation, call the <span style="font-family: Courier New,Courier,monospace">window_close()</span> function for a returned object of the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function.
+<li>Add a smart callback to the window to handle the window deletion event.
+<p>In the callback, call the <span style="font-family: Courier New,Courier,monospace">window_close()</span> function for the object returned from the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function call.</p>
<pre class="prettyprint">
+ evas_object_smart_callback_add(window->elm_window, "delete,request", on_window_deletion, &window);
+}
+
static void
on_window_deletion(void *user_data, Evas_Object *elm_window, void *event_info)
{
</pre></li></ol>
- <h2 id="layout" name="layout">Setting the Window Layout</h2>
+ <h2 id="layout" name="layout">Setting the Window Layout and View</h2>
-<p>Create the window layout.</p>
+<p>Create the layout for the browser window. The layout contains 2 boxes:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">vertical_layout</span> contains the view object that displays the browser pages.</li>
+<li><span style="font-family: Courier New,Courier,monospace">horizontal_layout</span> is a top bar that contains the buttons used to move between browser pages.</li>
+</ul>
<p class="figure">Figure: Window layout</p>
<p align="center"><img alt="Window layout" src="../../images/window_layout.png"/></p>
-<p>For this purpose, create new boxes (<span style="font-family: Courier New,Courier,monospace">vertical_layout</span> and <span style="font-family: Courier New,Courier,monospace">horizontal_layout</span>) using the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function:</p>
+
+<ol>
+<li><p>Create new boxes:</p>
+<ol type="a">
+<li>Add the boxes using the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function.</li>
+<li>Set the hints for the object weight using the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function.
+<p>The <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span> and <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span> are macro definitions for the values 1.0 and -1.0.</p></li>
+<li>Add the <span style="font-family: Courier New,Courier,monospace">vertical_layout</span> box as a resize subobject of the window using the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function.
+<p>The resize subobject size and position are controlled by the window directly.</p></li>
+<li>Add a subobject at the end of the pack list using the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function. </li>
+<li>Make the object visible using the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</li>
+</ol>
<pre class="prettyprint">
// Create vertical layout
elm_box_pack_end(vertical_layout, horizontal_layout);
evas_object_show(horizontal_layout);
</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function sets the hints for an object's weight. <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span> is a macro definition for a value 1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span> for -1.0). The <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function adds a subobject as the resize object of the object. The <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function makes an object visible. The <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function adds a subobject at the end of the pack list.</p>
-
-
- <h2 id="view" name="view">Setting the Window View</h2>
+</li>
-<p>Create a window view and set the user agent. To create the view, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_add()</span> function. The view is an object that displays pages in the browser. To set the user agent, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_user_agent_set()</span> function.</p>
+<li>Create a window view to display the browser pages and set the user agent:
+<ul>
+<li>To create the view, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_add()</span> function.</li>
+<li>To set the user agent, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_user_agent_set()</span> function.</li>
+</ul>
<pre class="prettyprint">
static Browser_Window*
ewk_view_user_agent_set(window->ewk_view, user_agent_string);
}</pre>
-
+</li>
+</ol>
<h2 id="keymouse" name="keymouse">Handling Key and Mouse Events</h2>
-<p>To handle mouse or key events, corresponding callbacks need to be set by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+<p>To handle mouse or key events in the window:</p>
+<ol>
+<li>Set callbacks for the mouse and key events using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function:
<pre class="prettyprint">
static Browser_Window*
window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
{
+ // Key down event
evas_object_event_callback_add(window->ewk_view, EVAS_CALLBACK_KEY_DOWN, on_key_down, window);
+ // Mouse down event
evas_object_event_callback_add(window->ewk_view, EVAS_CALLBACK_MOUSE_DOWN, on_mouse_down, window);
}
</pre>
-
-<table>
- <caption>
- Table: Key and mouse callbacks
- </caption>
- <tbody>
- <tr>
- <th>Event</th>
- <th>Callback</th>
- <th>Callback type</th>
- </tr>
- <tr>
- <td>Key down</td>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">static void on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info);</span></td>
- </tr>
- <tr>
- <td>Mouse down</td>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">static void on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info);</span></td>
- </tr>
- </tbody>
-</table>
-
-<p>To handle pressed key modifiers, such as Ctrl or Alt, the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_is_set()</span> function must be called. To get the <span style="font-family: Courier New,Courier,monospace">Evas_Modifier</span> object that contains information about which key modifiers are registered, call the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_get()</span> function, passing the <span style="font-family: Courier New,Courier,monospace">Evas</span> canvas object as an argument.</p>
+</li>
+<li>Define the key event down callback.
+<p>The <span style="font-family: Courier New,Courier,monospace">ev->key</span> instance contains the name of the key that caused the event.</p>
+<p>To handle pressed key modifiers, such as <strong>Ctrl</strong> or <strong>Alt</strong>, use the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_is_set()</span> function. To get the <span style="font-family: Courier New,Courier,monospace">Evas_Modifier</span> object that contains information about which key modifiers are registered, call the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_get()</span> function, passing the <span style="font-family: Courier New,Courier,monospace">Evas</span> canvas object as a parameter.</p>
<pre class="prettyprint">
static void
}
</pre>
-<p>Now <span style="font-family: Courier New,Courier,monospace">ev->key</span> contains the name of the key that caused the event trigger. For example, to check whether the combination Alt + Left Arrow was pressed, <span style="font-family: Courier New,Courier,monospace">(!strcmp(ev->key, "Left") && altPressed)</span> must evaluate to <span style="font-family: Courier New,Courier,monospace">TRUE</span>.</p>
+<p>For example, if the <strong>Alt + Left Arrow</strong> key combination is pressed, the <span style="font-family: Courier New,Courier,monospace">(!strcmp(ev->key, "Left") && altPressed)</span> statement must evaluate to <span style="font-family: Courier New,Courier,monospace">TRUE</span>.</p>
+<p>The following table shows how the key combinations match to specific view functions.</p>
<table>
<caption>
Table: Key behavior
</tr>
<tr>
<td>Alt+Left</td>
- <td>Back view</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_back</span></td>
+ <td>Go to the previous view in the browsing history.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">ewk_view_back()</span></td>
</tr>
<tr>
<td>Alt+Right</td>
- <td>Forward view</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_forward</span></td>
+ <td>Go to the next view in the browsing history.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">ewk_view_forward()</span></td>
</tr>
<tr>
<td>F5</td>
- <td>Reload view</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_reload</span></td>
+ <td>Reload the view.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">ewk_view_reload()</span></td>
</tr>
<tr>
<td>Alt+F5</td>
- <td>Reload view bypassing cache</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_bypass_cache</span></td>
+ <td>Reload the view bypassing the cache.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">ewk_view_bypass_cache()</span></td>
</tr>
<tr>
<td>F6</td>
- <td>Stop</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_stop</span></td>
+ <td>Stop loading the view.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">ewk_view_stop()</span></td>
</tr>
</tbody>
</table>
-
-<p>The mouse down event information is stored in <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span>. Similarly as in key events, <span style="font-family: Courier New,Courier,monospace">ev->button</span> contains information on which button was pressed. In this example, pressing the first button calls the <span style="font-family: Courier New,Courier,monospace">view_focus_set()</span> function to update the focus.</p>
+</li>
+<li>Define the mouse down event callback.
+<p>The mouse down event information is stored in the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span> instance. Similarly as in the key events, the <span style="font-family: Courier New,Courier,monospace">ev->button</span> instance contains information on which button was pressed.</p>
+<p>In the following example, pressing the first button calls the <span style="font-family: Courier New,Courier,monospace">view_focus_set()</span> function to update the focus:</p>
<pre class="prettyprint">
static void
view_focus_set(window, EINA_TRUE);
}
</pre>
+</li>
+</ol>
- <h2 id="show" name="show">Showing a Window and Setting the Focus</h2>
+ <h2 id="show" name="show">Showing the Window and Setting the Focus</h2>
-<p>In EFL, the UI focus control is implemented in an Elementary object, not an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. Therefore, the application using EWK derived from an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> must control the focus itself. For example, steal focus away from the <span style="font-family: Courier New,Courier,monospace">elm_window</span> object and give it to the <span style="font-family: Courier New,Courier,monospace">ewk_view</span>.</p>
-<p>To set the focus to an <span style="font-family: Courier New,Courier,monospace">ewk_view</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_focus_set()</span> functions.</p>
+<p>In EFL, the UI focus control is implemented in an Elementary, not Evas, object. Therefore, the application using EWK derived from an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> must control the focus itself.</p>
+<p>To show the window with the view object (<span style="font-family: Courier New,Courier,monospace">ewk_view</span>) and set the focus to the view:</p>
+<ol>
+<li>
+<p>Steal focus away from the <span style="font-family: Courier New,Courier,monospace">elm_window</span> object and give it to the <span style="font-family: Courier New,Courier,monospace">ewk_view</span>.</p>
+<p>Unfocus the window with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function, and move the focus to the view with the <span style="font-family: Courier New,Courier,monospace">evas_object_focus_set()</span> function:</p>
<pre class="prettyprint">
static void
view_focus_set(Browser_Window *window, Eina_Bool focus)
{
- // We steal focus away from elm focus model and start to do things
- // manually here, so elm now has no clue what is up. Tell elm that its
- // top level UI component is to be unfocused so elm gives up the focus
+ // You steal focus away from the elm focus model and start to do things
+ // manually, so elm has no clue what is up. Tell elm to unfocus
+ // the top level UI component
elm_object_focus_set(elm_object_top_widget_get(window->elm_window), EINA_FALSE);
evas_object_focus_set(window->ewk_view, focus);
};
</pre>
-
-<p>Call this function in the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function.</p>
+</li>
+<li>
+<p>Within the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function to make the window visible, and call the <span style="font-family: Courier New,Courier,monospace">view_focus_set()</span> function to perform the focus change defined above:</p>
<pre class="prettyprint">
window_create()
return window;
}
</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function makes the given <span style="font-family: Courier New,Courier,monospace">Evas</span> object visible.</p>
-
+</li>
+</ol>
<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>
+<p>You can use helper functions to find window structures:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> helper function takes the <span style="font-family: Courier New,Courier,monospace">elm_window</span> as a parameter and returns a pointer to the <span style="font-family: Courier New,Courier,monospace">Browser_Window</span> object that the window is part of.</li>
+<li>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>.</li>
+</ul>
+<p>Both functions use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro to iterate over the window list.</p>
<pre class="prettyprint">
static Browser_Window*
}
return NULL;
-}</pre>
+}
+</pre>
<h2 id="finalize" name="finalize">Finalizing the Application</h2>
-<p>To close the application correctly, use the <span style="font-family: Courier New,Courier,monospace">ewk_shutdown()</span> function. This function cleans up any resources your application has allocated.</p>
+<p>To close the application correctly:</p>
+<ol>
+<li>To clean up any resources your application has allocated, use the <span style="font-family: Courier New,Courier,monospace">ewk_shutdown()</span> function in the termination life-cycle callback:
<pre class="prettyprint">
static void
br_app_terminate(void *app_data)
{
ewk_shutdown();
-}</pre>
-
-<p>In the main function, register the termination callback:</p>
+}
+</pre>
+</li>
+<li>
+<p>In the <span style="font-family: Courier New,Courier,monospace">main()</span> function, register the termination callback:</p>
<pre class="prettyprint">
main()
return ui_app_main(argc, argv, &ops, &window);
}
</pre>
+</li>
+</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<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,
- function(){console.log("launch appControl succeeded");},
- function(e){/* Error handling */},
+ function() {console.log("launch appControl succeeded");},
+ function(e) {/* Error handling */},
appControlReplyCB);
</pre> </li>
</ol>
<li><p>Specify an <span style="font-family: Courier New,Courier,monospace;">AID</span> value for receiving HCE transaction events:</p>
<ol type="a">
<li>
-<p>To tell the platform which AID groups are requested by application, a metadata element must be included in the config.xml file:</p>
+<p>To tell the platform which AID groups are requested by the application, a metadata element must be included in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file:</p>
<pre class="prettyprint">
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:tizen="http://tizen.org/ns/wdigets" xmlns="http://www.w3.org/ns/widgets"
- id="http://yourdomain/basicapp"" version="1.0.0" viewmodes="maximized" >
+ id="http://yourdomain/basicapp" version="1.0.0" viewmodes="maximized" >
<profile name="wearable" />
<tizen:application id="ZmAk4fxZWY.basicapp" package="ZmAk4fxZWY" required_version="2.3.1"/>
<icon src=icon.png"/>
<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></ol>
+</ul></li></ol></li>
<li><p>Declare the required variables and obtain the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCAdapter">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCManager">wearable</a> applications).</p>
<p>To enable NFC card emulation, change the value of the <span style="font-family: Courier New,Courier,monospace">cardEmulationMode</span> attribute.</p>
<pre class="prettyprint">
adapter.cardEmulationMode = "ALWAYS_ON";
</pre></li>
-<li><p>To detect the HCE event, use the <span style="font-family: Courier New,Courier,monospace">addHCEEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to register a listener.</p> <p>Use the <span style="font-family: Courier New,Courier,monospace">sendHostAPDUResponse()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to send a host APDU (Application Protocol Data Unit is defined in the ISO/IEC 7816-4 specification) response to a Contactless Front-end.</p>
+<li>
+<p>To detect the HCE event, use the <span style="font-family: Courier New,Courier,monospace">addHCEEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to register a listener.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">sendHostAPDUResponse()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to send a host APDU response to a contactless front-end. (APDU - Application Protocol Data Unit - is defined in the ISO/IEC 7816-4 specification.)</p>
<pre class="prettyprint">
var successCB = function()
{
hceListenerId = adapter.addHCEEventListener(function(event_data)
{
- if (event_data.eventType =="ACTIVATED")
+ if (event_data.eventType == "ACTIVATED")
{
console.log("HCE activated");
}
- else if (event_data.eventType =="DEACTIVATED")
+ else if (event_data.eventType == "DEACTIVATED")
{
console.log("HCE deactivated");
}
- else if (event_data.eventType =="APDU_RECEIVED")
+ else if (event_data.eventType == "APDU_RECEIVED")
{
console.log("APDU received");
- var apdu_response= [0x00,0xA4,0x04,0x00,0x04,0x11,0x12, 0x13, 0x14];
+ var apdu_response = [0x00,0xA4,0x04,0x00,0x04,0x11,0x12, 0x13, 0x14];
adapter.sendHostAPDUResponse(apdu_response, successCB, errorCB);
}
});
-</pre></li>
- <li>To register an AID for a specific category and secure element type, use the <span style="font-family: Courier New,Courier,monospace">registerAID()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+</pre></li>
+<li>To register an AID for a specific category and secure element type, use the <span style="font-family: Courier New,Courier,monospace">registerAID()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
<pre class="prettyprint">
try
{
<p>The application sends a message by calling the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> function. </p>
<pre class="prettyprint">
var remoteMsgPort = tizen.messageport.requestRemoteMessagePort("websvcapp0.service1", "SERVICE_SAMPLE2");
-remoteMsgPort.sendMessage([{ key : "key", value : "SERVICE_EXIT" }]);
+remoteMsgPort.sendMessage([{key : "key", value : "SERVICE_EXIT"}]);
</pre>
</li>
<p>To manage button events:</p>
<ul>
-<li>Handle click events:
+<li>Handle click events.
<p>The "click" event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
<pre class="prettyprint">
-static void _button_click_cb(void *data, Evas_Object *button, void *ev)
+static void
+_button_click_cb(void *data, Evas_Object *button, void *ev)
{
elm_object_text_set(button, "Clicked!");
}
evas_object_smart_callback_add(button, "clicked", _button_click_cb, NULL);
</pre></li>
-<li>Handle press and unpress events:
+<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)
+<pre class="prettyprint">
+static void
+_button_press_cb(void *data, Evas_Object *button, void *ev)
{
elm_object_text_set(button, "Pressed!");
}
evas_object_smart_callback_add(button3, "unpressed", _button_unpress_cb, NULL);
</pre></li>
-<li>Handle repeated events:
+<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)
+<pre class="prettyprint">
+static void
+_button_repeat_cb(void *data, Evas_Object *button, void *ev)
{
static int count = 0;
char buf[16];
<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>
+ <li><a href="#color">Changing the Background Color</a></li>
+ <li><a href="#image">Changing the Background Image</a></li>
+ <li><a href="#use">Using an Overlay on the Background</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The background component can be used to set a solid background decoration to a window or 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. </p>
+<p>The background object emits no signals.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Bg.html">Background</a> API.</p>
bg = elm_bg_add(parent);
</pre>
-<h2 id="color">Changing the Color of the Background</h2>
+<h2 id="color">Changing the Background Color</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>
+<p>To set the color of the background, use the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function.</p>
+<p>The following example sets the background color to red:</p>
<pre class="prettyprint">
Evas_Object *bg;
elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
</pre>
-<h2 id="image">Changing the Image of the Background</h2>
+<h2 id="image">Changing the Background Image</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 the <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span> function. The following modes are available:</p>
+<p>You can 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. To set display mode of the image in the background, use the <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span> function and the following modes:</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_SCALE</span>: Scale the background image, retaining the aspect ratio.</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: Stretch the background image to fill the UI component's area.</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: Tile the background image at its original size.</li>
</ul>
elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
</pre>
-<h2 id="use">Using Overlay</h2>
+<h2 id="use">Using an Overlay on the Background</h2>
-<p>To set an overlay, use the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name. In the following example, the overlay is an Edje object that is displayed on top of the current background object.</p>
+<p>You can display an overlay on top of the current background object.</p>
+<p>To set an overlay, use the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name. In the following example, the overlay is an Edje object:</p>
<pre class="prettyprint">
elm_object_part_content_set(bg, "overlay", over);
<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>
+ <li><a href="#color">Changing the Background Color</a></li>
+ <li><a href="#image">Changing the Background Image</a></li>
+ <li><a href="#use">Using an Overlay on the Background</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The background component can be used to set a solid background decoration to a window or 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. </p>
+<p>The background object emits no signals.</p>
-
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Bg.html">Background</a> API.</p>
+
<p class="figure">Figure: Red color background</p>
<p align="center"><img alt="Red color background" src="../../images/bg_wn.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>
+<p>To create a background, use the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *bg, *parent;
bg = elm_bg_add(parent);
</pre>
-<h2 id="color">Changing the Color of the Background</h2>
+<h2 id="color">Changing the Background Color</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>
+<p>To set the color of the background, use the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function.</p>
+<p>The following example sets the background color to red:</p>
<pre class="prettyprint">
Evas_Object *bg;
elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
</pre>
-<h2 id="image">Changing the Image of the Background</h2>
+<h2 id="image">Changing the Background Image</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>
+<p>You can 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. To set display mode of the image in the background, use the <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span> function and the following modes:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component's area.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
+ <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 the aspect ratio.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: Stretch the background image to fill the UI component's area.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: Tile the background image at its original size.</li>
</ul>
<pre class="prettyprint">
elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
</pre>
-<h2 id="overlay">Using Overlay</h2>
+<h2 id="use">Using an Overlay on the Background</h2>
-<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
+<p>You can display an overlay on top of the current background object.</p>
+<p>To set an overlay, use the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name. In the following example, the overlay is an Edje object:</p>
<pre class="prettyprint">
elm_object_part_content_set(bg, "overlay", over);
</pre>
-<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
+
<table class="note">
<tbody>
<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="#styles">Using the 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>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. It has an autorepeat feature.</p>
+<p>The button component is a simple push button, which is composed of a label icon and an icon object. The button supports the autorepeat feature.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Button.html">Button</a> API.</p>
// Create a button
button = elm_button_add(parent);</pre>
-<h2 id="icon">Adding an Icon Inside a Button</h2>
-
-<p>To update the icon, use the <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>
+<p>You can add an icon or text inside the button:</p>
+<ul>
+<li>To add an icon, use the <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:
<pre class="prettyprint">
Evas_Object *ic;
ic = elm_icon_add(button);
elm_image_file_set(ic, "icon.png", NULL);
elm_object_part_content_set(button, "icon", ic);
-</pre>
+</pre></li>
-<h2 id="text">Adding Text Inside a Button</h2>
-
-<p>Modify the label using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:</p>
+<li>To add text to the label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:
<pre class="prettyprint">
elm_object_text_set(button, "Click me!");
-</pre>
+</pre></li></ul>
-<h2 id="styles">Using Button Styles</h2>
+<h2 id="styles">Using the Button Styles</h2>
-<p>The following styles are available for the button component:</p>
+<p>You can set a style for the button. 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">option</span></li>
</ul>
-<p>The following figure shows the themes in the same order.</p>
-
-<p class="figure">Figure: Button component</p>
-<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
-
-<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object:</p>
-
<pre class="prettyprint">
elm_object_style_set(button,"icon_expand_add");
</pre>
+<p>The following figure shows the styles in the same order as above.</p>
+
+<p class="figure">Figure: Button styles</p>
+<p align="center"><img alt="Button styles" src="../../images/button.png" /></p>
+
+
<h2 id="callback">Using the Button Callbacks</h2>
-<p>The button component emits the following signals:</p>
+<p>To receive notifications about the button events, listen to 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>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The button is clicked (press/release).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The button is pressed without releasing it.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The button is pressed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The button is released after being pressed.</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>In all cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
-<p>To register and define a callback function called by the clicked signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
+
+// Callback for the "clicked" signal
+// Called when the button is clicked by the user
void
clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>: 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>: Set the interval between 2 autorepeat events.</li>
-</ul>
-<p>To manage the autorepeat features:</p>
+<p>The autorepeat feature means that the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is called repeatedly while the user keeps the button pressed.</p>
+
+<p>To manage the autorepeat feature:</p>
<ul>
<li>
-<p>Disable the autorepeat feature:</p>
+<p>You can enable and disable the autorepeat feature. It is enabled by default.</p>
+<p>To disable the feature:</p>
<pre class="prettyprint">
elm_button_autorepeat_set(button, EINA_FALSE);
</pre>
</li>
<li>
-<p>Enable the autorepeat feature:</p>
-<pre class="prettyprint">
-elm_button_autorepeat_set(button, EINA_TRUE);
-</pre>
-</li>
-<li>
-<p>Set the initial timeout to 5 seconds:</p>
+<p>You can set the initial timeout before the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is emitted.</p>
+<p>To set the timeout to 5 seconds:</p>
<pre class="prettyprint">
elm_button_autorepeat_initial_timeout_set(button, 5.0);
</pre>
</li>
<li>
-<p>Set the gap between 2 signals to 0.5 seconds:</p>
+<p>You can set the interval between 2 <span style="font-family: Courier New,Courier,monospace">repeated</span> signals.</p>
+<p>To set the interval to 0.5 seconds:</p>
<pre class="prettyprint">
elm_button_autorepeat_gap_timeout_set(button, 0.5);
</pre>
<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="#styles">Using the 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>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. It has an autorepeat feature.</p>
+<p>The button component is a simple push button, which is composed of a label icon and an icon object. The button supports the autorepeat feature.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Button.html">Button</a> API.</p>
// Create a button
button = elm_button_add(parent);</pre>
-<h2 id="icon">Adding an Icon Inside a Button</h2>
-
-<p>To update the icon, use the <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>
+<p>You can add an icon or text inside the button:</p>
+<ul>
+<li>To add an icon, use the <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:
<pre class="prettyprint">
Evas_Object *ic;
ic = elm_icon_add(button);
elm_image_file_set(ic, "icon.png", NULL);
elm_object_part_content_set(button, "icon", ic);
-</pre>
+</pre></li>
-<h2 id="text">Adding Text Inside a Button</h2>
-
-<p>Modify the label using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:</p>
+<li>To add text to the label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:
<pre class="prettyprint">
elm_object_text_set(button, "Click me!");
-</pre>
+</pre></li></ul>
-<h2 id="styles">Using Button Styles</h2>
+<h2 id="styles">Using the Button Styles</h2>
-<p>Various styles can be used on the button.</p>
-<p>The following styles are available for a rectangular screen:</p>
+<p>You can set a style for the button:</p>
+<ul><li><p>The following styles are available for a rectangular screen:</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>
+</ul></li>
+<li>
<p>The following styles are available for a circular screen:</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>
+</ul></li></ul>
<pre class="prettyprint">
-// Example for the rectangular UI component
+// Rectangular screen button style
elm_object_style_set(button, "nextdepth");
-// Example for the circular UI component
+// Circular screen button style
elm_object_style_set(button, "bottom");
</pre>
<h2 id="callback">Using the Button Callbacks</h2>
-<p>The button component emits the following signals:</p>
+<p>To receive notifications about the button events, listen to 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>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The button is clicked (press/release).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The button is pressed without releasing it.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The button is pressed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The button is released after being pressed.</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>In all cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
-<p>To register and define a callback function called by the clicked signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
+
+// Callback for the "clicked" signal
+// Called when the button is clicked by the user
void
clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>: 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>: Set the interval between 2 autorepeat events.</li>
-</ul>
+<p>The autorepeat feature means that the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is called repeatedly while the user keeps the button pressed.</p>
-<p>To manage the autorepeat features:</p>
+<p>To manage the autorepeat feature:</p>
<ul>
<li>
-<p>Disable the autorepeat feature:</p>
+<p>You can enable and disable the autorepeat feature. It is enabled by default.</p>
+<p>To disable the feature:</p>
<pre class="prettyprint">
elm_button_autorepeat_set(button, EINA_FALSE);
</pre>
</li>
<li>
-<p>Enable the autorepeat feature:</p>
-<pre class="prettyprint">
-elm_button_autorepeat_set(button, EINA_TRUE);
-</pre>
-</li>
-<li>
-<p>Set the initial timeout to 5 seconds:</p>
+<p>You can set the initial timeout before the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is emitted.</p>
+<p>To set the timeout to 5 seconds:</p>
<pre class="prettyprint">
elm_button_autorepeat_initial_timeout_set(button, 5.0);
</pre>
</li>
<li>
-<p>Set the gap between 2 signals to 0.5 seconds:</p>
+<p>You can set the interval between 2 <span style="font-family: Courier New,Courier,monospace">repeated</span> signals.</p>
+<p>To set the interval to 0.5 seconds:</p>
<pre class="prettyprint">
elm_button_autorepeat_gap_timeout_set(button, 0.5);
</pre>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#add">Adding a Calendar Component</a></li>
- <li><a href="#month">Manipulating the Month View</a></li>
+ <li><a href="#month">Configuring the Month View</a></li>
<li><a href="#callback">Using the Calendar Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<h2 id="add">Adding a Calendar Component</h2>
-<p>Create the calendar component with the <span style="font-family: Courier New,Courier,monospace">elm_calendar_add()</span> function. The following example shows how to create a calendar component and set the current time to display the current month.</p>
+<p>To create the calendar component, use the <span style="font-family: Courier New,Courier,monospace">elm_calendar_add()</span> function.</p>
+<p>The following example shows how to create a calendar component and set the current time to display the current month:</p>
<pre class="prettyprint">
Evas_Object *calendar, *parent;
elm_calendar_selected_time_set(calendar, gmtime(&the_time));
</pre>
-<h2 id="month">Manipulating the Month View</h2>
-<p>To modify the month view:</p>
+<h2 id="month">Configuring the Month View</h2>
+<p>To configure the month view:</p>
<ul><li>
-<p>Change the first day of the week. By default, the first day of the week is Sunday. To change it to Monday:</p>
+<p>Change the first day of the week (by default, Sunday).</p>
+<p>To change the first weekday to Monday:</p>
<pre class="prettyprint">
elm_calendar_first_day_of_week_set(calendar, ELM_DAY_MONDAY);
</pre></li>
elm_calendar_weekdays_names_set(calendar, &weekname);
</pre></li>
-<li>Mark holidays with the <span style="font-family: Courier New,Courier,monospace">elm_calendar_mark_add()</span> function. The following example shows how to mark a Sunday as holiday.
+<li>Mark holidays with the <span style="font-family: Courier New,Courier,monospace">elm_calendar_mark_add()</span> function.
+<p>The following example shows how to mark a Sunday as holiday:</p>
<pre class="prettyprint">
struct tm *sunday = gmtime(&the_time);
sunday->tm_mday -= sunday->tm_wday;
<h2 id="callback">Using the Calendar Callbacks</h2>
-<p>The calendar component emits the <span style="font-family: Courier New,Courier,monospace">"changed"</span> signal when the selected date is changed. 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>
+<p>To receive notifications about the calendar events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when the selected date is changed.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(calendar, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the selected date is changed
+// Callback for the "changed" signal
+// Called when the selected date is changed
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#Modifying">Configuring the Check Component</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>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 a boolean value between true and false.</p>
+<p>The check component is similar to the <a href="component_radio_mn.htm">radio</a> component, except that it does not work as a group. It toggles a Boolean value between true and false.</p>
<p>The check component inherits from the layout component, which means that layout functions can be used on the 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>
+<h2 id="Modifying" name="Modifying">Configuring the Check Component</h2>
+
+<p>To configure the check component:</p>
-<p>Set the check component style with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. The following styles are available:</p>
+<ul>
+<li><p>Set the check component style. 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>
+ <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
</ul>
-
-<p>To set the <span style="font-family: Courier New,Courier,monospace">favorite</span> style on the check object:</p>
<pre class="prettyprint">
elm_object_style_set(check, "favorite");
</pre>
<pre class="prettyprint">
char *style = elm_object_style_get(check);
</pre>
-
-<h2 id="Using_Check" name="Using_Check">Using the Check Component</h2>
-
-<p>To use the check component:</p>
-<ul>
-<li>
-<p>Set the check component's 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>
-</li>
-<li>
-<p>Retrieve the current value of the check object:</p>
-<pre class="prettyprint">
-Eina_Bool value = elm_check_state_get(check);
-</pre>
</li>
<li>
-<p>Set an icon and a label:</p>
+<p>Set an icon and label for the check component:</p>
<pre class="prettyprint">
// Create a Home icon
Evas_Object *icon;
icon = elm_icon_add(parent);
elm_icon_standard_set(icon, "home");
-// Set it to the check object
+// Set the icon to the check component
elm_object_part_content_set(check, "icon", icon);
-// Set the check label
+// Set the label text
elm_object_text_set(check, "Check label");
</pre>
</li>
elm_object_part_text_set(check, "off", "False");
</pre>
</li>
+</ul>
+
+<h2 id="Using_Check" name="Using_Check">Using the Check Component</h2>
+
+<p>To use the check component:</p>
+<ul>
<li>
-<p>Retrieve the content set to the check object:</p>
+<p>Set the check component's Boolean value to true:</p>
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+</li>
+<li>
+<p>Retrieve the current value of the check component:</p>
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+</li>
+<li>
+<p>Retrieve the content set to the check component:</p>
<pre class="prettyprint">
-// Get the current set text of the check label
+// Get the text of the check label
char *text = elm_object_text_get(check);
-// Get the content set in the icon part
+// Get the icon part content
Evas_Object *icon = elm_object_part_content_get(check, "icon");
</pre>
</li>
<h2 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h2>
-<p>When the value is changed by the user, the <span style="font-family: Courier New,Courier,monospace">changed</span> 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>To receive notifications about the check events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when the check component value changes.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
-<p>To register a callback on the <span style="font-family: Courier New,Courier,monospace;">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(check, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the check value changes
+// Callback for the "changed" signal
+// Called when the check value changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#Modifying">Configuring the Check Component</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>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 a boolean value between true and false.</p>
+<p>The check component is similar to the <a href="component_radio_wn.htm">radio</a> component, except that it does not work as a group. It toggles a Boolean value between true and false.</p>
<p>The check component inherits from the layout component, which means that layout functions can be used on the check component.</p>
<h2 id="Adding" name="Adding">Adding a Check Component</h2>
<p>To create a check component, use the <span style="font-family: Courier New,Courier,monospace;">elm_check_add()</span> function:</p>
+
<pre class="prettyprint">
Evas_Object *check, *parent;
+
check = elm_check_add(parent);
</pre>
-<h2 id="Modifying" name="Modifying">Modifying the Check Styles</h2>
+<h2 id="Modifying" name="Modifying">Configuring the Check Component</h2>
+
+<p>To configure the check component:</p>
-<p>Set the check component style 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 screen:</p>
+<ul>
+<li><p>Set the check component style:</p>
+<ul><li><p>The following styles are available for the rectangular screen:</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 screen:</p>
+</ul></li>
+<li><p>The following styles are available for the circular screen:</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>To set the <span style="font-family: Courier New,Courier,monospace">on and off</span> style on the check object:</p>
+</ul></li></ul>
<pre class="prettyprint">
elm_object_style_set(check, "on and off");
</pre>
<pre class="prettyprint">
char *style = elm_object_style_get(check);
</pre>
+</li>
+<li>
+<p>Set an icon for the rectangular screen:</p>
+<pre class="prettyprint">
+// Create a Home icon
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "home");
+
+// Set the icon to the check component
+elm_object_part_content_set(check, "icon", icon);
+</pre>
+</li>
+</ul>
<h2 id="Using_Check" name="Using_Check">Using the Check Component</h2>
<p>To use the check component:</p>
<ul>
<li>
-<p>Set the check component's boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>:</p>
+<p>Set the check component's Boolean value to true:</p>
<pre class="prettyprint">
elm_check_state_set(check, EINA_TRUE);
</pre>
</li>
<li>
-<p>Retrieve the current value of the check object:</p>
+<p>Retrieve the current value of the check component:</p>
<pre class="prettyprint">
Eina_Bool value = elm_check_state_get(check);
</pre>
</li>
-<li>
-<p>Set an icon for the rectangular screen:</p>
-<pre class="prettyprint">
-// Create a Home icon
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, "home");
-// Set it to the check object
-elm_object_part_content_set(check, "icon", icon);
-</pre>
-</li>
<li>
-<p>Retrieve the content set to the check object:</p>
+<p>Retrieve the content set to the check component:</p>
<pre class="prettyprint">
-// Get the content set in the icon part
+// Get the icon part content
Evas_Object *icon = elm_object_part_content_get(check, "icon");
</pre>
</li>
<h2 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h2>
-<p>When the value is changed by the user, the <span style="font-family: Courier New,Courier,monospace">changed</span> 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>To receive notifications about the check events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when the check component value changes.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
-<p>To register a callback on the <span style="font-family: Courier New,Courier,monospace;">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(check, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the check value changes
+// Callback for the "changed" signal
+// Called when the check value changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#add">Adding a Circle Datetime Component</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="#property">Configuring the Circle Properties</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The circle datetime component extends the <a href="component_datetime_wn.htm">datetime</a> component (<span style="font-family: Courier New,Courier,monospace">elm_datetime</span>) by visualizing the selected field. 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 datetime increases or decreases the value of the selected field in the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component through 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>
+<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>
+
+<p class="figure">Figure: Circle datetime component</p>
+<p align="center"><img alt="Circle datetime component" src="../../images/circle_datetime.png" /></p>
-<h2 id="add">Creating a Circle Datetime</h2>
+<h2 id="add">Adding a Circle Datetime Component</h2>
-<p>To create a circle datetime object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function.</p>
-<p>When creating a circle datetime, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> handle must be passed as a parameter. If a circle surface is passed as a parameter, 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 parameter, the new circle object is managed and rendered by itself.</p>
+<p>To create a circle datetime component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> handle must be passed as the first parameter.</li>
+<li>If a <a href="component_circ_surface_wn.htm">circle surface</a> is passed as the second parameter, a circle object connected with a circle surface is created, and it is rendered by the circle surface. If you pass <span style="font-family: Courier New,Courier,monospace">NULL</span> instead of a circle surface, the new circle object is managed and rendered by itself.</li></ul>
<pre class="prettyprint">
Evas_Object *datetime;
Evas_Object *circle_datetime;
circle_datetime = eext_circle_object_datetime_add(datetime, surface);
</pre>
+<p>The circle datetime component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+
<h2 id="event">Activating a Rotary Event</h2>
-<p>To activate and deactivate the circle datetime, use 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>
+<p>To activate or deactivate the circle datetime, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
<pre class="prettyprint">
eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
</pre>
+<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle datetime can receive rotary events.</p>
-<h2 id="property">Using the Circle Object Property</h2>
+<h2 id="property">Configuring the Circle Properties</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 automatically has the default style.</p>
+<p>To configure the circle properties of the circle datetime:</p>
-<p>The circle datetime objects support the following circle object functions:</p>
+<ul><li>
+<p>You can modify the circle object within the circle datetime component using the following functions:</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_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>
+</ul></li>
+<li><p>You can modify the circle datetime <span style="font-family: Courier New,Courier,monospace">default</span> item, which draws the marker.</p>
+<p>To change the item properties, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p> </li></ul>
-<p>You can change the item properties by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</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>
+<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#add">Creating a Circle Genlist</a></li>
+ <li><a href="#add">Adding a Circle Genlist Component</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>
+ <li><a href="#property">Configuring the Circle Properties</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The circle genlist component is used to visualize and utilize the scroll effect for the <a href="component_genlist_wn.htm">genlist</a> component (<span style="font-family: Courier New,Courier,monospace">elm_genlist</span>). While the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides a 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>
+<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>
+
+<p class="figure">Figure: Circle genlist component</p>
+<p align="center"><img alt="Circle genlist component" src="../../images/circle_genlist.png" /></p>
-<h2 id="add">Creating a Circle Genlist</h2>
+<h2 id="add">Adding a Circle Genlist Component</h2>
-<p>A genlist and a surface are necessary when creating the circle genlist. Add a circle genlist with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_add()</span> function.</p>
+<p>To create a circle genlist component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_add()</span> function. Pass a genlist and <a href="component_circ_surface_wn.htm">circle surface</a> to the function as parameters.</p>
<pre class="prettyprint">
Evas_Object *genlist, *circle_genlist, *parent;
<h2 id="configure">Configuring the Circle Genlist</h2>
-<p>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>
+<p>To set the circle genlist scroller policy, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_scroller_policy_set()</span> function. The <a href="../../../../org.tizen.native.wearable.apireference/group__Scroller.html#gae4532876fde43d8d37fc9440a1e36a84">Elm_Scroller_Policy</a> enumerator defines the available scroller policies.</p>
+<p>The following example sets the horizontal scrollbar off and the vertical scrollbar always on:</p>
<pre class="prettyprint">
eext_circle_object_genlist_scroller_policy_set(circle_genlist,
ELM_SCROLLER_POLICY_OFF,
ELM_SCROLLER_POLICY_ON);
</pre>
-<p>This example sets the scrollbar visibility policy of a given scroller. This applies to the horizontal and vertical scrollbars respectively.</p>
-<p>The following enumerator values are available for circle genlist:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span>
-<p>The scrollbar is made visible if it is needed, and otherwise is kept hidden.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span>
-<p>The scrollbar is on all the time.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span>
-<p>The scrollbar is off.</p></li>
-</ul>
<h2 id="event">Activating a Rotary Event</h2>
-<p>To activate and deactivate the circle genlist, use 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.</p>
+<p>To activate or deactivate the circle genlist, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</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>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle genlist can receive rotary events.</p>
-<p>Circle genlist objects support the following circle object functions:</p>
+<h2 id="property">Configuring the Circle Properties</h2>
+
+<p>To configure the circle properties of the circle genlist:</p>
+
+<ul><li>
+<p>You can modify the circle object within the circle genlist component using the following functions:</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_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>Circle genlist has the following items:</p>
+</ul></li>
+<li><p>You can modify the circle genlist item properties with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p>
+<p>The circle genlist has the following items:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item. It draws a vertical scroll bar.</li>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws a 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 item properties by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</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>
+</ul></li></ul>
+<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#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>
+ <li><a href="#add">Adding a Circle Object Component</a></li>
+ <li><a href="#set_value">Setting the Value and Value Limits</a></li>
+ <li><a href="#angle">Setting the Angle Details</a></li>
+ <li><a href="#line">Setting the Line Width, Color, and Radius</a></li>
+ <li><a href="#disable">Disabling the Circle Object</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>
+<p>The circle object component extends elementary components in a form of the circular design. Sometimes, the circle object merely provides additional UI features to an elementary component, and sometimes it works as an independent component with its own UI and functionalities.</p>
-<h2 id="add">Creating a Circle Object</h2>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_add()</span> function to create a circle object.</p>
-<p>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 a parameter, a circle object connected with circle surface is created, and it is rendered by the circle surface.</p>
+<h2 id="add">Adding a Circle Object Component</h2>
+
+<p>To create a circle object component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_add()</span> function:</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 parameter, the new circle object is managed and rendered by itself. In the following example, a circle object without a circle surface is created and showed in a size of 360 x 360.</p>
+<p>When creating a circle object, you can select whether the circle object is rendered by itself or by the <a href="component_circ_surface_wn.htm">circle surface</a>:</p>
+<ul><li>If the circle surface is passed as the second parameter, a circle object connected with a circle surface is created, and it is rendered by the circle surface.</li>
+<li>If <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as the second parameter, the new circle object is managed and rendered by itself.</li></ul>
+
+<p>To create a circle object without a circle surface, and show it in a size of 360 x 360:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
evas_object_show(circle_obj);
</pre>
-<h2 id="line">Setting the Line Width</h2>
+<h2 id="set_value">Setting the Value and Value Limits</h2>
+
+<p>To set the value details of the circle object:</p>
-<p>To set the line width:</p>
+<ul>
+<li>Set the maximum and minimum value:
<ul>
<li>
-<p>Set the line width of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function.</p>
-<p>In the following example, a 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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span> function.</p>
+<p>To set the minimum and maximum values of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function.</p>
+<p>In the following example, a circle object with a surface is created and its minimum and maximum values are set to 0.0 and 10.0 degrees:</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);
+eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
</pre>
+<p>To get the current minimum and maximum values of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span> function.</p>
</li>
<li>
-<p>Set the line width of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_set()</span> function.</p>
-<p>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 with 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;
+<p>To set the value of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function 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, the following example creates a circle object with the minimum and maximum values of 0.0 and 10.0 degrees:</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_line_width_set(circle_obj, "default", 20);
+eext_circle_object_item_value_min_max_set(circle_obj, "default", 0.0, 10.0);
</pre>
+<p>To get the current minimum and maximum values of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_min_max_get()</span> function.</p>
</li>
</ul>
-
-<h2 id="angle">Setting the Angle</h2>
-
-<p>To set the angle:</p>
+</li>
+<li>Set the value:
+<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>
<ul>
<li>
-<p>Set the angle of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function.</p>
-<p>In the following example, a 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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span> function.</p>
+<p>To set the value of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function.</p>
+<p>In the following example, a circle object with a surface is created and its value is set to 5.0 degrees:</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_value_set(circle_obj, 5.0);
</pre>
+<p>To get the current value of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
</li>
<li>
-<p>Set the angle of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_set()</span> function.</p>
-<p>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 <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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_get()</span> function.</p>
+<p>To set the value of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Similar to the above example, the following example creates a circle object with a surface and sets its value to 5.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
+eext_circle_object_item_value_set(circle_obj, "default", 5.0);
</pre>
+<p>To get the current value of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_get()</span> function.</p>
</li>
-</ul>
+</ul></li></ul>
+
+<h2 id="angle">Setting the Angle Details</h2>
-<h2 id="offset">Setting the Angle Offset</h2>
+<p>To set the angle details of the circle object:</p>
-<p>To set the angle offset:</p>
+<ul>
+<li>Set the angle:
<ul>
<li>
-<p>Set the angle offset of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function.</p>
-<p>In the following example, 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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span> function.</p>
+<p>To set the angle of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function.</p>
+<p>In the following example, a circle object with a surface is created and its angle is set to 45.0 degrees:</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>To get the current angle of a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span> function.</p>
</li>
<li>
-<p>Set the angle offset of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_set()</span> function.</p>
-<p>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 <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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_get()</span> function.</p>
+<p>To set the angle of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Similar to the above example, the following example creates a circle object with a surface and sets its angle to 45.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
-eext_circle_object_item_angle_offset_set(circle_obj, "default", 30.0);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
</pre>
+<p>To get the current angle of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_get()</span> function.</p>
</li>
</ul>
-
-<h2 id="minmax">Setting the Minimum and Maximum Angle</h2>
-
-<p>To set the minimum and maximum angle:</p>
+</li>
+<li>Set the angle offset:
<ul>
<li>
-<p>Set the minimum and maximum angle of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function.</p>
-<p>In the following example, 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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span> function.</p>
+<p>To set the angle offset of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function.</p>
+<p>In the following example, a circle object with a 45.0 degree angle is created and its angle offset is set to 30.0 degrees. As a result, the circle object has an arch of a 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees.</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);
+eext_circle_object_angle_set(circle_obj, 45.0);
+eext_circle_object_angle_offset_set(circle_obj, 30.0);
</pre>
+<p>To get the current angle offset of a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span> function.</p>
</li>
<li>
-<p>Set the minimum and maximum angles of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function.</p>
-<p>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_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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_get()</span> function.</p>
+<p>To set the angle offset of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. The following example works the same way as the above example:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_min_max_set(circle_obj, "default", 0.0, 90.0);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
+eext_circle_object_item_angle_offset_set(circle_obj, "default", 30.0);
</pre>
+<p>To get the current angle of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_get()</span> function.</p>
</li>
</ul>
-
-<h2 id="value">Setting the Minimum and Maximum Value</h2>
-
-<p>To set the maximum and minimum value:</p>
+</li>
+<li>Set the minimum and maximum angles:
<ul>
<li>
-<p>Set the minimum and maximum values of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function.</p>
-<p>In the following example, 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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span> function.</p>
+<p>To set the minimum and maximum angles of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function.</p>
+<p>In the following example, a circle object with a surface is created and its minimum and maximum angles are set to 0.0 and 90.0 degrees:</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);
+eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
</pre>
+<p>To get the current minimum and maximum angles of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span> function.</p>
</li>
<li>
-<p>Set the value of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function.</p>
-<p>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_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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_min_max_get()</span> function.</p>
-<pre class="prettyprint">
+<p>To set the minimum and maximum angles of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function 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, the following example creates a circle object with the minimum and maximum angles of 0.0 and 90.0:</p>
+<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_min_max_set(circle_obj, "default", 0.0, 10.0);
+eext_circle_object_item_angle_min_max_set(circle_obj, "default", 0.0, 90.0);
</pre>
+<p>To get the current minimum and maximum angles of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_get()</span> function.</p>
</li>
-</ul>
+</ul></li></ul>
-<h2 id="set_value">Setting the Value</h2>
+<h2 id="line">Setting the Line Width, Color, and Radius</h2>
-<p>To set the value:</p>
+<p>To set the line width, color, and radius of the circle object:</p>
-<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>
+<ul>
+<li>Set the line width:
<ul>
<li>
-<p>Set the value of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function.</p>
-<p>In the following example, 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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<p>To set the line width of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function.</p>
+<p>In the following example, a circle object with a surface is created and its line width is set to 20:</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);
+eext_circle_object_line_width_set(circle_obj, 20);
</pre>
+<p>To get the current line width of a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span> function.</p>
</li>
<li>
-<p>Set the value of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_set()</span> function.</p>
-<p>If the 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 with 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;
+<p>To set the line width of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function 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, the following example creates a circle object with a surface and sets its line width to 20:</p>
+<pre class="prettyprint">Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_set(circle_obj, "default", 5.0);
+eext_circle_object_item_line_width_set(circle_obj, "default", 20);
</pre>
+<p>To get the current line width of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_get()</span> function.</p>
</li>
-</ul>
-
+</ul></li>
-
-<h2 id="color">Setting the Color</h2>
-
-<p>To set the color:</p>
+<li>Set the color:
<ul>
<li>
-<p>Set the color of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function.</p>
-<p>To set the color, red, green, blue, and alpha values in range from 0 to 255 must be passed. In the following example, a circle object with a surface is created and its color set to blue. You can get the current color of circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span> function.</p>
+<p>To set the color of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function.</p>
+<p>To set the color, the red, green, blue, and alpha values in a range from 0 to 255 must be passed. In the following example, a circle object with a surface is created and its color is set to red:</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>To get the current color of circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span> function.</p>
</li>
<li>
-<p>Set the color of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_set()</span> function.</p>
-<p>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_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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_get()</span> function.</p>
+<p>To set the color of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function 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, the following example creates a circle object with a surface and sets its color to red:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_value_set(circle_obj, "default", 255, 0, 0, 255);
</pre>
+<p>To get the current color of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_get()</span> function.</p>
</li>
-</ul>
-
-<h2 id="radius">Setting the Radius</h2>
-
-<p>To set the radius:</p>
+</ul></li>
+<li>Set the radius:
<ul>
<li>
-<p>Set the radius of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function.</p>
-<p>In the following example, a circle object with radius of 50.0 is created. You can get the current radius of the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span> function.</p>
+<p>To set the radius of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function.</p>
+<p>In the following example, a circle object with a radius of 50.0 is created:</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>To get the current radius of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span> function.</p>
</li>
<li>
-<p>Set the radius of a certain item in a circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_set()</span> function.</p>
-<p>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_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 with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_get()</span> function.</p>
+<p>To set the radius of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_set()</span> function.</p>
+<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function 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, the following example creates a circle object with a radius of 50.0:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_radius_set(circle_obj, "default", 50.0);
</pre>
+<p>To get the current radius of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_get()</span> function.</p>
</li>
-</ul>
+</ul></li></ul>
-<h2 id="disable">Disabling a Circle Object</h2>
+<h2 id="disable">Disabling the Circle Object</h2>
-<p>Disable the circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function.</p>
-<p>In the following example, a circle object is disabled. You can get the current disabled status of circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span> function.</p>
+<p>To disable the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</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>To enable a disabled circle object, use the same function with the <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> parameter.</p>
-<p>Enable a disabled circle object with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> parameter:</p>
-<pre class="prettyprint">
-eext_circle_object_disabled_set(circle_obj, EINA_FALSE);
-</pre>
-
-
+<p>To get the current disabled status of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span> function.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#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="#add">Adding a More Option Component</a></li>
+ <li><a href="#item">Adding More Option Items</a></li>
+ <li><a href="#configure">Configuring the More Option and Items</a></li>
<li><a href="#callback">Using the More Option Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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> functions, because the more option handle is an <span style="font-family: Courier New,Courier,monospace">elm_layout</span> object.</p>
+<p>The more option component is a wearable circular UI component. The more option handle can use the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> functions, 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 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 basic view of the more option contains a cue button (shown on the left in the following figure). When the cue button is clicked, the selector view appears from the cue location (shown on the right in the figure). When the back motion is done in the selector view, the selector view disappears.</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>The selector view can emit events when an item or the selector are clicked, and it can receive a rotary event. However, you do not need to call the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function to activate the rotary event, since the function is called automatically according to the <span style="font-family: Courier New,Courier,monospace">elm_panel</span> state.</p>
-<p class="figure">Figure: More Option</p>
-<p align="center"><img alt="More Option" src="../../images/more_option.png" /></p>
+<p class="figure">Figure: More option component</p>
+<p align="center"><img alt="More option component" 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>
+<h2 id="add">Adding a More Option Component</h2>
+<p>To create a more option component, 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>
+<h2 id="item">Adding More Option Items</h2>
+
+<p>To add an item:</p>
+
+<ol>
+<li>Append the new item with the <span style="font-family: Courier New,Courier,monospace">eext_more_option_item_append()</span> function:
+
+<pre class="prettyprint">
+{
+ Evas_Object *img = NULL;
+
+ // Append item
+ Eext_Object_Item *item = eext_more_option_item_append(parent);
+</pre></li>
+
+<li>Configure the item (for more information, see <a href="#configure">Configuring the More Option and Items</a>).
+<p>In the following example, the main and sub text are set for the item, and an icon is added as the item content:</p>
+<pre class="prettyprint">
+ // Set the text in the rotary_selector
+ eext_more_option_item_part_text_set(item, "selector,main_text", "test1");
+ eext_more_option_item_part_text_set(item, "selector,sub_text", "test1");
+ // Set the content icon
+ img = elm_image_add(parent);
+ eext_more_option_item_part_content_set(item, "item,icon", img);
+ elm_image_file_set(img, "/music_controller_btn_play.png", NULL);
+}
+</pre></li></ol>
+
-<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 and Items</h2>
-<h2 id="configure">Configuring the More Option</h2>
+<p>To configure the more option cue button direction, and the text and content of various more option parts:</p>
-<p>To configure the direction of the cue button, use the direction state, which has the following values:</p>
+<ul>
+<li>Configure the direction of the cue button with the <span style="font-family: Courier New,Courier,monospace">eext_more_option_direction_set()</span> function. The second parameter defines the cue button direction, which can be one of the following values:
<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>
+<p>To set the cue button on the right:</p>
<pre class="prettyprint">
eext_more_option_direction_set(more_option, EEXT_MORE_OPTION_DIRECTION_RIGHT);
</pre>
+</li>
-<p>The following table shows the customizable more option parts.</p>
+<li>For each more option item, configure the main and sub text, and the item icon. The main and sub texts are shown in the selector when the item is selected.
+<p>The following table shows the configurable more option parts.</p>
<table>
-<caption>Table: Customizable more option parts</caption>
+<caption>Table: Configurable more option parts</caption>
<tbody>
<tr>
<th>Part</th>
<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, use the <span style="font-family: Courier New,Courier,monospace">eext_more_option_item_append()</span> function and set the item attributes:</p>
-
-<pre class="prettyprint">
-{
- Evas_Object *img = NULL;
- // Append item
- Eext_Object_Item *item = eext_more_option_item_append(parent);
- // Set the text in the rotary_selector
- eext_more_option_item_part_text_set(item, "selector,main_text", "test1");
- eext_more_option_item_part_text_set(item, "selector,sub_text", "test1");
- // Set the content icon
- img = elm_image_add(parent);
- eext_more_option_item_part_content_set(item, "item,icon", img);
- elm_image_file_set(img, "/music_controller_btn_play.png", NULL);
-}
-</pre>
+</li></ul>
<h2 id="callback">Using the More Option Callbacks</h2>
-<p>The more option emits the following signals:</p>
+<p>To receive notifications about the more option events, listen to 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>
+<ul><li><span style="font-family: Courier New,Courier,monospace">item,selected</span>: The item is selected.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,clicked</span>: An already selected item is selected again or a selector has been selected.</li>
+<li><span style="font-family: Courier New,Courier,monospace">more,option,opened</span>: The layout with the rotary selector is shown.</li>
+<li><span style="font-family: Courier New,Courier,monospace">more,option,closed</span>: The 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>In all these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter 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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">more,option,opened</span> signal:</p>
<pre class="prettyprint">
{
- evas_object_smart_callback_add(more_option, “more,option,opened”, _opened_cb, data);
+ evas_object_smart_callback_add(more_option, "more,option,opened", _opened_cb, data);
}
-// Callback function for the "more,option,opened" signal
-// This callback is called when the more_option is seen
+// Callback for the "more,option,opened" signal
+// Called when the rotary selector is shown
void
_opened_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+ <li><a href="#add">Adding a Circle Progressbar Component</a></li>
+ <li><a href="#configure">Configuring the Circle Progressbar</a></li>
+ <li><a href="#property">Configuring the Circle Properties</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The circle progressbar component shows the progress status of a given task with the 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>
+<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>
+
+<p class="figure">Figure: Circle progressbar component</p>
+<p align="center"><img alt="Circle progressbar component" src="../../images/circle_progressbar.png" /></p>
-<h2 id="add">Creating a Circle Progressbar</h2>
+<h2 id="add">Adding a Circle Progressbar Component</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>
+<p>To create a circle progressbar component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_progressbar_add()</span> function. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter to render the progressbar.</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>
+<h2 id="configure">Configuring the Circle Progressbar</h2>
+
+<p>Before using the circle progressbar, set its value details:</p>
+
+<ul><li>To set the minimum and maximum values, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function.</li>
+<li>To set the current value, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function.</li></ul>
+
+<p>In the following example, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0:</p>
+<pre class="prettyprint">
+eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
+eext_circle_object_value_set(circle_progressbar, 3.0);
+</pre>
+
+<h2 id="property">Configuring the Circle Properties</h2>
+
+<p>To configure the circle properties of the circle progressbar:</p>
+
+<ul><li>
+<p>You can modify the circle object within the circle progressbar component using the following functions:</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_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>
+<li><p>You can modify the circle progressbar item properties with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p>
+<p>The 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>
+</ul></li></ul>
-<h2 id="configure">Configuring the Circle Progressbar</h2>
+<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
-<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 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="#add">Adding a Rotary Selector Component</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="#item">Adding Rotary Selector Items</a></li>
+ <li><a href="#configure">Configuring the Selector and Items</a></li>
<li><a href="#callback">Using the Rotary Selector Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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 component 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 previous 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>The rotary selector handle can use the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> functions, 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>
+<p class="figure">Figure: Rotary selector component</p>
+<p align="center"><img alt="Rotary selector component" src="../../images/rotary_selector.png" /></p>
-<h2 id="add">Creating a Rotary Selector</h2>
+<h2 id="add">Adding a Rotary Selector Component</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">
</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>
+<p>To activate or deactivate the rotary selector, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</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>
+<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the rotary selector can receive rotary events.</p>
-<ul><li>The available selector states are:
+<h2 id="item">Adding Rotary Selector Items</h2>
-<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>
+ <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:</p>
+
+<ol>
+<li>Append the new item with the <span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_append()</span> function:
-<p>For example, to set the selector color for a normal state selector:</p>
<pre class="prettyprint">
-eext_rotary_selector_part_color_set(selector, "selector,bg_image",
- EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL,
- 100, 100, 100, 255);
+Eext_Object_Item * item;
+Evas_Object *image;
+
+// Append item
+item = eext_rotary_selector_item_append(rotary_selector);
</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>
+<li>Configure the item (for more information, see <a href="#configure">Configuring the Selector and Items</a>).
+<p>In the following example, 2 icons are set for the item and selector:</p>
+
<pre class="prettyprint">
-eext_rotary_selector_item_part_color_set(item, "item,icon",
- EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
- 100, 100, 100, 255);
-</pre></li></ul>
+// Set item icon
+image = elm_image_add(rotary_selector);
+elm_image_file_set(image, "music_controller_btn_play.png", NULL);
+
+eext_rotary_selector_item_part_content_set(item, "item,icon",
+ EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
-<p>The following table shows the customizable rotary selector parts.</p>
+// Set selector content icon
+image = elm_image_add(rotary_selector);
+elm_image_file_set(image, "music_controller_btn.png", NULL);
+eext_rotary_selector_item_part_content_set(item, "selector,icon",
+ EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
+</pre></li>
+
+<li>Define the item texts. The text is displayed in the selector when the item is selected.
+<p>In the following example, the main text is defined for the new item:</p>
+<pre class="prettyprint">
+// Set selector main text
+eext_rotary_selector_item_part_text_set(item, "selector,main_text", "Options");
+</pre>
+
+<p>The following table shows the functions you can use to set the main and sub text of an item.</p>
<table>
-<caption>Table: Customizable rotary selector parts</caption>
+<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></li></ol>
+
+
+<h2 id="configure">Configuring the Selector and Items</h2>
+
+<p>You can configure the color and content of various rotary selector parts.</p>
+<p>The following table shows the configurable rotary selector parts.</p>
+
+<table>
+<caption>Table: Configurable rotary selector parts</caption>
<tbody>
<tr>
<th>Part</th>
</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>
+ <p>You can also configure the selector and item appearance based on their current state:</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>
+<ul><li>The available selector states are:
-<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>
+<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_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, "music_controller_btn_play.png", NULL);
-
-eext_rotary_selector_item_part_content_set(item, "item,icon",
- EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
-// Set selector main text
-eext_rotary_selector_item_part_text_set(item, "selector,main_text", "Options");
-
-// Set selector content icon
-image = elm_image_add(rotary_selector);
-elm_image_file_set(image, "music_controller_btn.png", NULL);
-eext_rotary_selector_item_part_content_set(item, "selector,icon",
- EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
-</pre>
+eext_rotary_selector_part_color_set(selector, "selector,bg_image",
+ EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL,
+ 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, "item,icon",
+ EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
+ 100, 100, 100, 255);
+</pre></li></ul>
+
<h2 id="callback">Using the Rotary Selector Callbacks</h2>
-<p>The rotary selector emits the following signals:</p>
+<p>To receive notifications about the rotary selector events, listen to 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>
+<ul><li><span style="font-family: Courier New,Courier,monospace">item,selected</span>: The item is selected.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,clicked</span>: The item is clicked.</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>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter 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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">item,clicked</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(rotary_selector, "item,clicked", item_clicked_cb, data);
}
-// Callback function for the "item,clicked" signal
-// This callback is called when the item is clicked by the user
+// Callback for the "item,clicked" signal
+// Called when the item is clicked by the user
void
item_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#add">Adding a Circle Scroller Component</a></li>
+ <li><a href="#configure">Configuring the 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>
+ <li><a href="#property">Configuring the Circle Properties</a></li>
+
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The circle scroller component changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.</p>
+
+<p>The circle scroller wraps the <a href="container_scroller_n.htm">scroller</a> component (<span style="font-family: Courier New,Courier,monospace">elm_scroller</span>) internally to draw a circular scroller to the edge of the circular screen. This means that you can use the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> callbacks and functions, excluding the <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> functions.</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>
-<p class="figure">Figure: Circle Scroller</p>
-<p align="center"><img alt="Circle Scroller" src="../../images/circle_scroller.png" /></p>
+<p class="figure">Figure: Circle scroller component</p>
+<p align="center"><img alt="Circle scroller component" src="../../images/circle_scroller.png" /></p>
-<h2 id="add">Creating a Circle Scroller</h2>
+<h2 id="add">Adding a Circle Scroller Component</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>
+<p>To create a circle scroller component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_add()</span> function. Pass a <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> component as the first parameter and a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.</p>
<pre class="prettyprint">
Evas_Object *scroller;
Evas_Object *circle_scroller;
circle_scroller = eext_circle_object_scroller_add(scroller, surface);
</pre>
+<p>The circle scroller component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+
+<h2 id="configure">Configuring the Circle Scroller</h2>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> functions to configure a circle scroller, except for the <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> functions.</p>
+
+<p>To set the circle scroller policy, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_set()</span> function. The <a href="../../../../org.tizen.native.wearable.apireference/group__Scroller.html#gae4532876fde43d8d37fc9440a1e36a84">Elm_Scroller_Policy</a> enumerator defines the available scroller policies.</p>
+<p>The following example sets the horizontal scrollbar on when needed and the vertical scrollbar always off:</p>
+
+<pre class="prettyprint">
+eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
+</pre>
+
+<p>To get the current scroller policy, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_get()</span> function.</p>
+
<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>
+<p>To activate or deactivate the circle scroller, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
<pre class="prettyprint">
eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
</pre>
+<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle scroller can receive rotary events.</p>
-<h2 id="property">Using the Circle Object Property</h2>
+<h2 id="property">Configuring the Circle Properties</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>To configure the circle properties of the circle scroller:</p>
-<p>Circle scroller objects support the following circle object API calls:</p>
+<ul><li>
+<p>You can modify the circle object within the circle scroller component using the following functions:</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_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>
+<li><p>You can modify the circle scroller item properties with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p>
+<p>The circle scroller 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>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the vertical scroller.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroller background circle item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bar</span>: Horizontal scroller circle item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bg</span> : Horizontal scroller background circle item.</li>
+</ul></li></ul>
-<h2 id="configure">Configuring the Circle Scroller</h2>
+<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
-<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 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="#add">Adding a Circle Slider Component</a></li>
+ <li><a href="#configure">Configuring the Circle Slider</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>
+ <li><a href="#property">Configuring the Circle Properties</a></li>
+ <li><a href="#callback">Using the Circle Slider Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The circle slider component changes corresponding to rotary events. The circle slider not only extends the UI feature of the <a href="component_slider_wn.htm">slider</a> component (<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 the circular design.</p>
-<p class="figure">Figure: Circle Slider</p>
-<p align="center"><img alt="Circle Slider" src="../../images/circle_slider.png" /></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>
+
+<p class="figure">Figure: Circle slider component</p>
+<p align="center"><img alt="Circle slider component" src="../../images/circle_slider.png" /></p>
-<h2 id="add">Adding an Eext Slider Object</h2>
+<h2 id="add">Adding a Circle Slider Component</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>
+<p>To create a circle slider component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.</p>
<pre class="prettyprint">
Evas_Object *circle_slider = NULL;
+
circle_slider = eext_circle_object_slider_add(parent, surface);
</pre>
+<p>The circle slider component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+
+<h2 id="configure">Configuring the Circle Slider</h2>
+
+<p>To configure the circle slider:</p>
+<ul>
+<li>
+<p>Before using the circle slider, set its minimum and maximum values with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function, and the current value with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function.</p>
+<p>In the following example, 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>
+</li>
+<li>
+<p>Set the step value with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_step_set()</span> function.</p>
+<p>The circle slider step value is used when the rotary event increases or decreases the circle slider value. In the following example, the step value is set to 0.5:</p>
+<pre class="prettyprint">
+eext_circle_object_slider_step_set(circle_slider, 0.5);
+</pre>
+</li>
+
+<li>
+<p>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>
+</li>
+</ul>
+
<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>
+<p>To activate or deactivate the circle slider, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</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>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle slider can receive rotary events.</p>
-<p>A circle slider has the following styles:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-</ul>
+<h2 id="property">Configuring the Circle Properties</h2>
+
+<p>To configure the circle properties of the circle slider:</p>
-<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>
+<p>You can modify the circle object within the circle slider component using the following functions:</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_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>
+<li><p>You can modify the circle slider item properties with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p>
+<p>The 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">default</span>: Default circle item, which draws the 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>
+</ul></li></ul>
-<h2 id="configure">Configuring the Circle Slider</h2>
+<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
-<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 the Circle Slider Callbacks</h2>
-<h2 id="callback">Using Circle Slider Callbacks</h2>
+<p>To receive notifications about the circle slider events, listen to the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal, which is called when the rotary event changes the circle slider value.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal:</p>
-<p>The circle slider emits the following signal:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">value,changed</span>: The rotary event changes the circle slider value.</li>
-</ul>
-<p>For this signal, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal.</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(slider, "value,changed", _value_changed_cb, data);
}
-// Callback function for the "value,changed" signal
-// This callback is called when a value of the circle slider is changed
+// Callback for the "value,changed" signal
+// Called when the value of the circle slider is changed
static void
_value_changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#add">Adding a Circle Spinner Component</a></li>
+ <li><a href="#configure">Configuring the Circle Spinner</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>
+ <li><a href="#property">Configuring the Circle Properties</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The circle spinner component extends the spinner component (<span style="font-family: Courier New,Courier,monospace">elm_spinner</span>) by visualizing its value. The circle spinner increases or decreases the value of the <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>
+<p class="figure">Figure: Circle spinner component</p>
+<p align="center"><img alt="Circle spinner component" 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 "circle".</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>
+<h2 id="add">Adding a Circle Spinner Component</h2>
+<p>To create a circle spinner component:</p>
+<ol><li>Create an <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> object:
<pre class="prettyprint">
Evas_Object *spinner, *circle_spinner;
+
spinner = elm_spinner_add(parent);
+</pre></li>
+<li>Set the object style as <span style="font-family: Courier New,Courier,monospace">circle</span>:
+<pre class="prettyprint">
elm_object_style_set(spinner, "circle");
+</pre></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. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.
+<pre class="prettyprint">
circle_spinner = eext_circle_object_spinner_add(spinner, surface);
-</pre>
-
-<h2 id="event">Activating a Rotary Event</h2>
+</pre></li></ol>
-<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>
+<p>The circle spinner component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
<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>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 it calculates the minimum and maximum angles 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 automatically synchronized with the user values. You can also use the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> callback functions.</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>To customize the angle offset of the marker to not to follow the internally-calculated system value:</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>
+<ol>
+<li>Set the custom circle spinner angle value using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_angle_set()</span> function.
+<p>In the following example, the circle spinner angle value is set to 2.0:</p>
<pre class="prettyprint">
eext_circle_object_spinner_angle_set(circle_spinner, 2.0);
+</pre></li>
+
+<li>After the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_angle_set()</span> function has been executed, the calculation formula for the angle offset is changed:
+
+<pre class="prettyprint">
+// Formula for calculating the default angle offset
+(360/ max - min) * step
+
+// Formula for calculating the angle offset with the new angle value
+(360/ max - min) * step * 2.0</pre></li></ol>
+
+<p>You can also use the above function to define the angle offset per each rotary callback.</p>
+
+
+<h2 id="event">Activating a Rotary Event</h2>
+
+<p>To activate or deactivate the circle spinner, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_spinner, EINA_TRUE);
</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>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle spinner can receive rotary events.</p>
+
+<h2 id="property">Configuring the Circle Properties</h2>
-<p>You can also use the same above function to give the angle offset per each rotary callback.</p>
+<p>To configure the circle properties of the circle spinner:</p>
-<h2 id="property">Using the Circle Spinner Properties</h2>
+<ul><li>
+<p>You can modify the circle object within the circle spinner component using the various functions, such as:</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>
+</ul></li>
-<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>
+<li><p>You can modify the circle spinner <span style="font-family: Courier New,Courier,monospace">default</span> item, which draws the marker.</p>
+<p>To change the item properties, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p> </li></ul>
-<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>
-
+<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#add">Creating a Circle Surface</a></li>
+ <li><a href="#add">Adding a Circle Surface Component</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>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>
+<p>The circle surface component manages and renders <a href="component_circ_object_wn.htm">circle objects</a>. Multiple circle objects can be connected to 1 circle surface as candidates of an object to be rendered. When 1 circle object is set as visible, the surface renders the circle object and hides the others.</p>
-<h2 id="add">Creating a Circle Surface</h2>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SURFACE__MODULE.html">Efl Extension Circle Surface</a> API.</p>
+
+<h2 id="add">Adding a Circle Surface Component</h2>
<p>To create a new circle surface:</p>
+
+<ul>
+<li>Create a circle surface in the conformant layer using the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_conformant_add()</span> function:
<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>
+</li>
+<li>Create a circle surface in the layout layer using the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_layout_add()</span> function:
<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>
+</li>
+<li>Create a circle surface in the naviframe layer using the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_naviframe_add()</span> function:
<pre class="prettyprint">
Eext_Circle_Surface *surface;
Evas_Object *naviframe;
naviframe = elm_naviframe_add(parent);
surface = eext_circle_surface_naviframe_add(naviframe);
</pre>
-
+</li>
+</ul>
<table class="note">
<tbody>
<tr>
<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>
+<p>You can add any circle objects to a circle surface.</p>
+<p>To create a circle slider (<span style="font-family: Courier New,Courier,monospace">eext_slider</span>) component and add it to a circle surface in the conformant layer:</p>
<pre class="prettyprint">
Eext_Circle_Surface *surface;
Evas_Object *slider;
<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>
+<p>Deleting the Evas object (conformant, layout, or naviframe) automatically deletes the circle surface in the same layer.</p>
+
+<p>You can, however, 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>
<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="#set">Setting the Colorselector Mode</a></li>
<li><a href="#use">Using the Colorselector Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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>The colorselector component allows the user to select a color.</p>
-<p>Currently only the Palette mode is available in Tizen (other modes are planned for in the future):</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_COLORSELECTOR_PALETTE</span>
-<p>The Palette mode displays several color items that enable the user to choose a color from 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. You can 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>
-</li>
-</ul>
-
-<p>This UI component inherits from the layout component, which means that layout component functions can also be used on the colorselector component.</p>
+<p>The colorselector component inherits from the layout component, which means that layout component functions can be used on the colorselector component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Colorselector.html">Colorselector</a> API.</p>
<h2 id="add">Adding a Colorselector Component</h2>
-<p>To create a colorselector object, use the <span style="font-family: Courier New,Courier,monospace">elm_colorselector_add()</span> function:</p>
+<p>To create a colorselector component, use the <span style="font-family: Courier New,Courier,monospace">elm_colorselector_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *colorsel, *parent;
colorsel = elm_colorselector_add(parent);
</pre>
-<h2 id="set">Setting the Colorselector Modes</h2>
+<h2 id="set">Setting the Colorselector Mode</h2>
+
+<p>The colorselector has various modes, each of which shows a different colorselector configuration. Currently, only the palette mode is available in Tizen (other modes are planned for the future).</p>
+
+<p>The palette mode displays several color items from which the user can select. 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. You can create a new series of colors (a new palette) and save it under another identifier. By default, the palette mode uses the <span style="font-family: Courier New,Courier,monospace">default</span> palette, which contains 14 colors.</p>
+
+<p>To use the palette mode:</p>
-<p>To set the mode of the colorselector to the palette mode:</p>
+<ul>
+<li><p>To set the colorselector mode to palette:</p>
<pre class="prettyprint">
elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
-</pre>
+</pre></li>
-<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 load it again later. 3 colors are added in <span style="font-family: Courier New,Courier,monospace">mypalette</span>: red, green, and blue.</p>
+<li>To create a new palette called <span style="font-family: Courier New,Courier,monospace">mypalette</span>, with 3 colors (red, green, and blue):
<pre class="prettyprint">
elm_colorselector_palette_name_set(colorsel, "mypalette");
elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">default</span> palette already contains 14 colors.</p>
-
-<pre class="prettyprint">
-elm_colorselector_palette_name_set(colorsel, "default");
-</pre>
+<p>The new palette is saved by the elementary configuration and you can load it again later.</p>
+</li>
-<p>When the color elements are clicked, the element changes the color that is set to the colorselector component. To retrieve the current selected color, use the following function.</p>
+<li>When a color in the colorselector is clicked, the color set to the colorselector component changes.
+<p>To retrieve the currently selected color:</p>
<pre class="prettyprint">
int r, g, b, a;
elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
-</pre>
+</pre></li></ul>
<h2 id="use">Using the Colorselector Callbacks</h2>
-<p>You can register callbacks on the following signals:</p>
+<p>To receive notifications about the colorselector events, listen to 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 color item is pressed. 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 color item is long pressed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback contains the selected color item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The color value changes on the selector.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,selected</span>: The color item is pressed.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the pressed color item.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,longpressed</span>: The color item is long-pressed.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the long-pressed color item.</p></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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(colorselector, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the colorselector value changes
+// Callback for the "changed" signal
+// Called when the colorselector value changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#styles">Using the Ctxpopup Styles</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>
<p>This feature is supported in mobile applications only.</p>
-<p>Context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.</p>
+<p>The context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Ctxpopup.html">Ctxpopup</a> API.</p>
<h2 id="add">Adding a Ctxpopup Component</h2>
-<p>Create the ctxpopup with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function. When shown, the ctxpopup automatically chooses an area inside its parent object's view to optimally fit into it. Set the object view with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span> function.</p>
+<p>To create a ctxpopup component, use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *ctxpopup, *parent;
ctxpopup = elm_ctxpopup_add(parent);
</pre>
-<h2 id="styles">Modifying the Ctxpopup Style</h2>
+<p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span> function.</p>
-<p>The following styles are available:</p>
+<h2 id="styles">Using the Ctxpopup Styles</h2>
+
+<p>The ctxpopup has the following styles:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
<p class="figure">Figure: Ctxpopup default (left) and more/default (right) style</p>
<p align="center"><img alt="Ctxpopup default style" src="../../images/ctxpopup1.png" /> <img alt="Ctxpopup more/default style" src="../../images/ctxpopup2.png" /></p>
-<p>To set the <span style="font-family: Courier New,Courier,monospace">more/default</span> style:</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">more/default</span>:</p>
<pre class="prettyprint">
elm_object_style_set(ctxpopup, "more/default");
<p>To configure the ctxpopup:</p>
<ul>
<li>
-<p>Set the ctxpopup orientation with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span> function. In the following example, it is set to horizontal.</p>
+<p>Set the ctxpopup orientation with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span> function.</p>
+<p>In the following example, the orientation is set to horizontal:</p>
<pre class="prettyprint">
elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
</pre>
</li>
<li>Disable auto hiding.
-<p>Ctxpopup can be hidden automatically when its parent is resized. The auto hide functionality is enabled by default. You can disable auto hiding by calling the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_auto_hide_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>.</p>
+<p>The ctxpopup can be hidden automatically when its parent is resized. The auto hide functionality is enabled by default. You can disable auto hiding by calling the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_auto_hide_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>:</p>
<pre class="prettyprint">
elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
</pre>
</li>
<li>
-<p>Set the priority of the direction where the ctxpopup appears from:</p>
+<p>Set the priority of the direction where the ctxpopup appears from with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_direction_priority_set()</span> function:</p>
<pre class="prettyprint">
elm_ctxpopup_direction_priority_set(ctxpopup, ELM_CTXPOPUP_DIRECTION_UP, ELM_CTXPOPUP_DIRECTION_LEFT,
<h2 id="items">Managing the Ctxpopup Items</h2>
+<p>The ctxpopup can contain a small number of items. Each item can have a label, an icon, or both.</p>
+
<p>To manage the ctxpopup items:</p>
<ol>
<li>
-<p>The ctxpopup can contain a small number of items. Each of them can have a label, an icon, or both. The following example shows how to append an item with <span style="font-family: Courier New,Courier,monospace">test</span> label, icon, and the <span style="font-family: Courier New,Courier,monospace">clicked</span> callback (<span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb</span>).</p>
+<p>Add an item with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function.</p>
+<p>To append an item with a <span style="font-family: Courier New,Courier,monospace">test</span> label, icon, and the <span style="font-family: Courier New,Courier,monospace">clicked</span> callback (<span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb</span>):</p>
<pre class="prettyprint">
Elm_Object_Item *it;
</pre>
</li>
<li>
-<p>Change the item label and icon if the label and icon parameters are not <span style="font-family: Courier New,Courier,monospace">NULL</span> when the item is appended. The following example shows how to change the item label to <span style="font-family: Courier New,Courier,monospace">New label</span>:</p>
+<p>Change the item label and icon, if the label and icon parameters are not <span style="font-family: Courier New,Courier,monospace">NULL</span> when the item is appended:</p>
+<ul>
+<li>To change the item label to <span style="font-family: Courier New,Courier,monospace">New label</span>:
-<pre class="prettyprint">elm_object_item_part_text_set(it, "default", "New label");
+<pre class="prettyprint">
+elm_object_item_part_text_set(it, "default", "New label");
</pre>
</li>
<li>
-<p>Set its icon to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon:</p>
+<p>To set the icon to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon:</p>
<pre class="prettyprint">
Evas_Object *home_icon = elm_icon_add(ctxpopup);
elm_icon_standard_set(home_icon, "home");
elm_object_item_part_content_set(it, "icon", home_icon);
-</pre>
+</pre></li></ul>
</li>
<li>
-<p>The clicked callback is called when the item is clicked:</p>
+<p>Define a callback that is triggered when the item is clicked:</p>
<pre class="prettyprint">
static void
_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
{
- dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
+ dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
}
</pre>
</li>
<h2 id="callback">Using the Ctxpopup Callbacks</h2>
-<p>The ctxpopup 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>
+<p>To receive notifications about the ctxpopup events, listen to the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal, which is called when the ctxpopup is dismissed.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
}
-// Callback function for the "dismissed" signal
-// This callback is called when the ctxpopup is dismissed
+// Callback for the "dismissed" signal
+// Called when the ctxpopup is dismissed
void
dismissed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#styles">Using the Ctxpopup Styles</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>
<p>This feature is supported in wearable applications only.</p>
-<p>Context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.</p>
+<p>The context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Ctxpopup.html">Ctxpopup</a> API.</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: Ctxpopup component</p>
+<p align="center"><img alt="Ctxpopup component" src="../../images/ctxpopup_wn.png" /></p>
- <p class="figure">Figure: Context popup hierarchy</p>
-<p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+ <p class="figure">Figure: Ctxpopup hierarchy</p>
+ <p align="center"><img alt="Ctxpopup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
<h2 id="add">Adding a Ctxpopup Component</h2>
-<p>Create the ctxpopup with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function. When shown, the ctxpopup automatically chooses an area inside its parent object's view to optimally fit into it. Set the object view with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span> function.</p>
+<p>To create a ctxpopup component, use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *ctxpopup, *parent;
ctxpopup = elm_ctxpopup_add(parent);
</pre>
-<h2 id="styles">Modifying the Ctxpopup Style</h2>
+<p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span> function.</p>
+<h2 id="styles">Using the Ctxpopup Styles</h2>
-<p>The following styles are available for the rectangular UI component:</p>
+<p>The ctxpopup has the following styles for the rectangular screen:</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>
+<p>The ctxpopup has the following styles for the circular screen:</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>
+<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>
+<p>These 2 styles can be used as a pair.</p></li>
</ul>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">default</span>:</p>
-<p>To set the <span style="font-family: Courier New,Courier,monospace">default</span> style:</p>
<pre class="prettyprint">
elm_object_style_set(ctxpopup, "default");
</pre>
<h2 id="configure">Configuring the Ctxpopup</h2>
+
<p>To configure the ctxpopup:</p>
<ul>
<li>
-<p>Set the ctxpopup orientation with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span> function. In the following example, it is set to horizontal.</p>
+<p>Set the ctxpopup orientation with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span> function.</p>
+<p>In the following example, the orientation is set to horizontal:</p>
<pre class="prettyprint">
elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
</pre>
</li>
<li>Disable auto hiding.
-<p>The auto hide functionality is enabled by default. You can disable auto hiding by calling the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_auto_hide_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>.</p>
+<p>The ctxpopup can be hidden automatically when its parent is resized. The auto hide functionality is enabled by default. You can disable auto hiding by calling the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_auto_hide_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>:</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 item can have a label, an icon, or both.</p>
+
<p>To manage the ctxpopup items:</p>
<ol>
<li>
-<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>
+<p>Add an item with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function.</p>
+<p>To append an item with a <span style="font-family: Courier New,Courier,monospace">test</span> label, no icon, and the <span style="font-family: Courier New,Courier,monospace">clicked</span> callback (<span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb</span>):</p>
<pre class="prettyprint">
Elm_Object_Item *it;
-it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb,
- NULL);
-</pre>
-</li>
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
-<pre class="prettyprint">
-static void
-_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
-}
+it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb, NULL);
</pre>
</li>
<li>
-<p>Set the item label to <span style="font-family: Courier New,Courier,monospace">New label</span>:</p>
+<p>Change the item label and icon:</p>
+<ul>
+<li>To change the item label to <span style="font-family: Courier New,Courier,monospace">New label</span>:
+
<pre class="prettyprint">
elm_object_item_part_text_set(it, "default", "New label");
</pre>
</li>
<li>
-<p>Set its icon to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon:</p>
+<p>To set the icon to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon:</p>
+
<pre class="prettyprint">
Evas_Object *home_icon = elm_icon_add(ctxpopup);
elm_icon_standard_set(home_icon, "home");
elm_object_item_part_content_set(it, "icon", home_icon);
+</pre></li></ul>
+</li>
+<li>
+<p>Define a callback that is triggered when the item is clicked:</p>
+<pre class="prettyprint">
+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
+}
</pre>
</li>
</ol>
<h2 id="callback">Using the Ctxpopup Callbacks</h2>
-<p>The ctxpopup 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>
+<p>To receive notifications about the ctxpopup events, listen to the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal, which is called when the ctxpopup is dismissed.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
}
-// Callback function for the "dismissed" signal
-// This callback is called when the ctxpopup is dismissed
+// Callback for the "dismissed" signal
+// Called when the ctxpopup is dismissed
void
dismissed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+<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 1 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>
<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>
+ <td class="note">When creating a new style, you need to know how each UI component is themed, because setting another style always replaces the entire group used by the UI component. Important signals and parts must be there for the object to behave properly.</td>
</tr>
</tbody>
</table>
<p>When several styles are loaded in the current theme, you can set a different style to a specific UI component using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
-<p>The default theme specifies several styles for the button component. The code below shows how to set the "anchor" style of a newly created button component.</p>
+<p>The default theme specifies several styles for the button component. The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">"anchor"</span> style for a newly created button component.</p>
<pre class="prettyprint">
Evas_Object *parent, *button;
// Create a button object
button = elm_button_add(parent);
-// Set its style to "anchor""
+// Set its style to "anchor"
elm_object_style_set(button, "anchor");
</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>Once written and compiled with Edje tools, the Elementary provides 2 methods to load the style in the application theme: overlays and extensions.</p>
<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>
+<p>To load theme styles:</p>
+ <ul>
+ <li>
+ <p>An overlay can replace the look of all UI components by overriding the default style. If a new style called <span style="font-family: Courier New,Courier,monospace">"default"</span> is created for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.</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 "default" for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.</p>
-
-<p>Here is how to add an overlay to your application's theme.</p>
+<p>The following example shows how to add an overlay to the application's theme.</p>
<pre class="prettyprint">
elm_theme_overlay_add(NULL, "./theme_button.edj");
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Here we assume that the "theme_button.edj" file only contains a new theme for the button component.</td>
- </tr>
- </tbody>
- </table>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button components defined in the application. You must make sure that the "theme_button.edj" file reimplements everything that was previously defined in the default theme concerning the button component.</td>
+ <td class="note">In the example it is assumed that the <span style="font-family: Courier New,Courier,monospace">theme_button.edj</span> file only contains a new theme for the button component.
+ <p>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 <span style="font-family: Courier New,Courier,monospace">theme_button.edj</span> file reimplements everything that was previously defined in the default theme concerning the button component.</p></td>
</tr>
</tbody>
</table>
-<p>This is how to remove the previously added overlay to return to the default theme.</p>
+<p>To remove the previously added overlay and to return to the default theme:</p>
<pre class="prettyprint">
elm_theme_overlay_del(NULL, "./theme_button.edj");
</pre>
+ </li>
+ <li>
+ <p>With extensions, it is possible to write styles that can be applied 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>
-<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>
+<p>The application adds a theme to the list of extensions with the following call:</p>
<pre class="prettyprint">
elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Here we assume that the "theme_button_style_custom.edj" file contains a new button style called "custom".</td>
+ <td class="note">In the example it is assumed that the <span style="font-family: Courier New,Courier,monospace">theme_button_style_custom.edj</span> file contains a new button style called <span style="font-family: Courier New,Courier,monospace">"custom"</span>.</td>
</tr>
</tbody>
</table>
-<p>This is how to use the new "custom" style on a button component.</p>
-
+<p>To use the new <span style="font-family: Courier New,Courier,monospace">"custom"</span> style on a button component:</p>
<pre class="prettyprint">
Evas_Object *parent, *button;
<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>
+ <td class="note">When using the <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> functions to add a new theme extension or overlay to a Theme object (the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush()</span> function to flush the Elementary theme caches. This means that the theme of all UI components that use the default theme is reloaded.</td>
</tr>
</tbody>
</table>
+</li>
+ </ul>
<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>
+<p>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 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>
+<p>The following example shows how to apply this theme to a button UI component and its children:</p>
<pre class="prettyprint">
// Create a button component
<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>UI component themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an
<span style="font-family: Courier New,Courier,monospace">.edj</span> 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 "default" style, rename it, and update it to your needs.</p>
+<p>A new Edje style can be added for a UI component. The best way is to copy the existing <span style="font-family: Courier New,Courier,monospace">"default"</span> 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>
+<p>To create a customized style:</p>
+<ol>
+<li>
+<p>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 (the <span style="font-family: Courier New,Courier,monospace">check.edc</span> file) is composed of several groups.</p>
+<p>These 2 groups define 2 different styles for the check component (the <span style="font-family: Courier New,Courier,monospace">"default"</span> style and the <span style="font-family: Courier New,Courier,monospace">"toggle"</span> style).</p>
<pre class="prettyprint">
group
{
name: "elm/check/base/toggle";
}
</pre>
-
-<p>Those two groups define two different styles for the check component (the "default" style and the "toggle" style).</p>
-
-<p>We copy the group corresponding to the "default" style in a new file to create a new style called "custom". This new style is saved in the "check_custom.edc" file.</p>
-
+</li>
+<li>
+<p>Copy the group corresponding to the <span style="font-family: Courier New,Courier,monospace">"default"</span> style in a new file to create a new style called <span style="font-family: Courier New,Courier,monospace">"custom"</span>. This new style is saved in the <span style="font-family: Courier New,Courier,monospace">check_custom.edc</span> file.</p>
<pre class="prettyprint">
group
{
// Here is the copy of the content of "default" style
}
</pre>
-
-<p>In the new group ("elm/check/base/custom"), we have to find the parts we want to modify. Here, the appropriate parts are "bg" and "check" parts.</p>
+</li>
+<li>
+<p>In the new group (<span style="font-family: Courier New,Courier,monospace">elm/check/base/custom</span>), find the parts to modify. In this example, the appropriate parts are <span style="font-family: Courier New,Courier,monospace">"bg"</span> and <span style="font-family: Courier New,Courier,monospace">"check"</span>.</p>
<pre class="prettyprint">
part
}
</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>
+<p>It is assumed that you are familiar with <a href="theme_n.htm">Edje</a> and know Edje basics, and therefore not all options to be modified are detail here.</p>
+</li>
+<li>
+<p>Add the custom pictures in the custom style.</p>
+<p>The 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>
+ <li><span style="font-family: Courier New,Courier,monospace">check_base_custom.png</span> for the background part</li>
+ <li><span style="font-family: Courier New,Courier,monospace">check_custom.png</span> 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>
+<p>You must update the <span style="font-family: Courier New,Courier,monospace">image.normal</span> attribute in both parts with the custom pictures filenames to modify the pictures of this style.</p>
<pre class="prettyprint">
part
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Here, we assume that the custom images are the same size as the "default" images.</td>
+ <td class="note">In this example, it is assumed that the custom images are the same size as the <span style="font-family: Courier New,Courier,monospace">"default"</span> images.</td>
</tr>
</tbody>
</table>
+</li>
+</ol>
+
<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>Once written, the <span style="font-family: Courier New,Courier,monospace">check_custom.edc</span> 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>
+<p>To use the new style:</p>
+<ol>
+<li>
+<p>Add the new theme file as an extension in the application:</p>
<pre class="prettyprint">
-char edj_path[PATH_MAX] = {0, };
+char edj_path[PATH_MAX] = {0,};
// Get the full path of the edj file
app_get_resource("/edje/check_custom.edj", edj_path, (int)PATH_MAX);
// Load check custom style as an extension
elm_theme_extension_add(NULL, edj_path);
</pre>
-
-<p>Use the "custom" style on a new check component.</p>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">"custom"</span> style on a new check component:</p>
<pre class="prettyprint">
Evas_Object *parent, *check;
// Set its style to "custom"
elm_object_style_set(check, "custom");
</pre>
+</li>
+</ol>
<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>
+<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the <span style="font-family: Courier New,Courier,monospace">TEXT</span> type 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 "default" style), there is a part called "elm.swallow.content" that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
+<p>In the previous example (the check component <span style="font-family: Courier New,Courier,monospace">"default"</span> style), there is a part called <span style="font-family: Courier New,Courier,monospace">"elm.swallow.content"</span> that is of the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> type.</p>
<pre class="prettyprint">
part
}
</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>
+<p>You can push content (<span style="font-family: Courier New,Courier,monospace">Evas_Object</span>) 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;
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a UI component's style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the UI component's behavior.</td>
+ <td class="note">You can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a UI component's style, if you want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the UI component's behavior.</td>
</tr>
</tbody>
</table>
<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 "default" style contains a part named "elm.text".</p>
+<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check <span style="font-family: Courier New,Courier,monospace">"default"</span> style contains a part named <span style="font-family: Courier New,Courier,monospace">"elm.text"</span>.</p>
<pre class="prettyprint">
part
description
{
state: "visible" 0.0;
- inherit: "default" 0.0;
+ inherit: "default" 0.0;
visible: 1;
text.min: 1 1;
}
}
</pre>
-<p>This is how to modify the content of the "elm.text" part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
+<p>The following example shows how to modify the content of the <span style="font-family: Courier New,Courier,monospace">"elm.text"</span> 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;
<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 Since Tizen 2.3</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>This feature is supported in mobile applications only.</p>
-<p>The datetime component displays and adds date and time values.</p>
+<p>The datetime component displays date and time values.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Datetime.html">Datetime</a> API.</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 component</p>
+<p align="center"> <img alt="Datetime component" 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>Create the datetime component with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span> function. It is possible to select the visible fields with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function. The following fields can be controlled:</p>
+<p>To create a datetime component:</p>
+
+<ol>
+<li>Add the datetime component with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span> function:
+<pre class="prettyprint">
+Evas_Object *datetime, *parent;
+
+datetime = elm_datetime_add(parent);
+</pre></li>
+
+<li>Select the visible fields with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function.
+
+<p>The visibility of the following fields can be controlled:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: Year field</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: Month field</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: 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>
+<p>To 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_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>
+</pre></li>
+</ol>
<h2 id="styles">Using the Datetime Styles</h2>
-<p>The following styles are available:</p>
+<p>The datetime has the following styles:</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_24hr</span></li>
</ul>
-<p>To set the <span style="font-family: Courier New,Courier,monospace">date_layout</span> style to the datetime component:</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">date_layout</span>:</p>
<pre class="prettyprint">
elm_object_style_set(datetime, "date_layout");
</pre>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Pay attention to the following UX issue since Tizen 2.3:
+
+<p>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 shows specific fields from the format, limited by the UX concept:</p>
+
+<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>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 current style, the function does not work.</p></td>
+ </tr>
+ </tbody>
+ </table>
+
<h2 id="set">Setting the Datetime Format</h2>
-<p>The format of the date and time can be configured with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> function using a combination of allowed Libc date format specifiers. In the following example, the format is set to DD MM YY.</p>
+<p>The date and time format can be configured with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> function using a combination of allowed Libc date format specifiers.</p>
+<p>To set the format to "DD MM YY":</p>
<pre class="prettyprint">
elm_datetime_format_set(datetime, "%d%B%Y");
</pre>
-<p>For a complete list
available options, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Datetime.html">Datetime</a> API.</p>
+<p>For a complete list
of available specifiers, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Datetime.html">Datetime</a> API.</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>
+<p>To receive notifications about the datetime events, listen to the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The datetime field values are changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The system locale changes.</li>
+</ul>
+
+<p>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the datetime fields change
+// Callback for the "changed" signal
+// Called when the datetime fields change
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
}</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
-
-
-<h2 id="ux">UX Issue Since 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>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>
<p>This feature is supported in wearable applications only.</p>
-<p>The datetime component displays and adds date and time values.</p>
+<p>The datetime component displays date and time values.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime</a> API.</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 component</p>
+<p align="center"><img alt="Datetime component" src="../../images/datetime_wn.png" /> </p>
<p class="figure">Figure: Datetime hierarchy</p>
-<p align="center"><img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p>
+<p align="center">
<img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p>
<h2 id="add">Adding a Datetime Component</h2>
-<p>Create the datetime component with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span> function. The following fields can be controlled:</p>
+<p>To create a datetime component:</p>
+<ol>
+<li>Add the datetime component with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span> function.
+</li>
+<li>Select the visible fields with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function.
+
+<p>The visibility of the following fields can be controlled:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: Year field</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: Month field</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: AM/PM field</li>
</ul>
+</li>
+</ol>
<h2 id="styles">Using the Datetime Styles</h2>
-<p>The following styles are available:</p>
+<p>The datetime has the following styles:</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>To set the <span style="font-family: Courier New,Courier,monospace">datepicker_layout</span> style to the datetime component:</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">datepicker_layout</span>:</p>
<pre class="prettyprint">
elm_object_style_set(datetime, "datepicker_layout");
</pre>
<h2 id="set">Setting the Datetime Format</h2>
-<p>The format of the date and time can be configured with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> function using a combination of allowed Libc date format specifiers. In the following example, the format is set to HH : MM.</p>
+<p>The date and time format can be configured with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> function using a combination of allowed Libc date format specifiers.</p>
+<p>To set the format to "HH : MM":</p>
+
<pre class="prettyprint">
elm_object_style_set(datetime, "timepicker_layout");
elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M");
</pre>
-<p>For a complete list
available options, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime</a> API.</p>
+<p>For a complete list
of available specifiers, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime</a> API.</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>
+<p>To receive notifications about the datetime events, listen to the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The datetime field values are changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The system locale changes.</li>
+</ul>
+
+<p>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the datetime fields change
+// Callback for the "changed" signal
+// Called when the datetime fields change
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
}</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
-
+
<table class="note">
<tbody>
<tr>
<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>
+ <li><a href="#editor">Managing the Text</a></li>
+ <li><a href="#cursor">Managing the Cursor</a></li>
+ <li><a href="#configure">Configuring the Entry</a></li>
+ <li><a href="#formatting">Modifying Formatting and Using Special Markups</a></li>
+ <li><a href="#callback">Using the Entry Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>The entry component is a box where the user can enter text. It supports the following features:</p>
<ul>
+ <li>Multiline</li>
+ <li>Scrolling</li>
<li>Password mode</li>
<li>Filtering text</li>
<li>Read/write from a file</li>
<li>Theme style overrides</li>
</ul>
-<p>The entry component includes an Evas Textblock in it, which means that it supports the features of the textblock component, such as text wrapping and formatted markup text.</p>
+<p>The entry component includes an Evas <a href="../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Textblock.html">Textblock</a> in it, which means that it supports the features of the textblock component, such as text wrapping and formatted markup text.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">Entry</a> API.</p>
<h2 id="add">Adding an Entry Component</h2>
-<p>Create the entry component with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and set the text inside it with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function:</p>
+<p>To create an entry component, use the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function. You can set the text inside it with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function.</p>
+
<pre class="prettyprint">
Evas_Object *entry, *parent;
elm_entry_entry_set(entry, "A short text.");
</pre>
-<h2 id="editor">Using the Text Editor</h2>
+<h2 id="editor">Managing the Text</h2>
-<p>To use the text editor:</p>
+<p>To manage the entry component content:</p>
<ul>
<li>
-<p>Append text to the end of existing content:</p>
+Add text to the entry:
+
+<ul><li>Append text to the end of the existing content:
<pre class="prettyprint">
elm_entry_entry_append(entry, "END");
</li>
<li>
<p>Insert text at the current cursor position:</p>
-
<pre class="prettyprint">
elm_entry_entry_insert(entry, "CURSOR");
-Eina_Bool Empty = elm_entry_is_empty(entry);
</pre>
-
-<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> function 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>
-</li>
+</li></ul></li>
<li>
-<p>Make the entry uneditable by the user. By default, the user can enter text in the entry component when it is in focus.</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>
- </li>
- </ul>
-
-<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>
-
+<p>Check whether the entry is empty:</p>
<pre class="prettyprint">
-elm_entry_password_set(entry, EINA_TRUE);
+Eina_Bool Empty = elm_entry_is_empty(entry);
</pre>
-
-<p>When the password mode is enabled, the <span style="font-family: Courier New,Courier,monospace">elm_object_text_get()</span> function returns an utf8 string for user convenience.</p>
-
-<h2 id="wrap">Entry Line Modes and Wrapping</h2>
-
-<p>The entry component has 2 line modes:</p>
- <ul>
- <li>Single line mode</li>
- <li>Multiline mode</li>
- </ul>
-
-<p>To use entry line modes:</p>
+<p>If the entry has content, the function returns the Boolean <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> variable.</p>
+</li>
+<li>Select text:
<ul>
-<li>
-<p>Set the entry to the single line mode:</p>
+<li>Select all the content of the entry component:
<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_TRUE);
+elm_entry_select_all(entry);
</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>
</li>
-<li>
-<p>Set the entry to the multiline mode (single line off), and the text wraps at the end of the entry and pressing Enter creates a new line:</p>
+<li>Select a part of the text with the <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span> function. <p>The following example selects the first 20 characters of the entry content:</p>
<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_FALSE);
-elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+elm_entry_select_region_set(entry, 0, 20);
</pre>
-
-<p>In multiline entries, the <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> function 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>
</li>
-</ul>
-<h2 id="select">Selecting Text</h2>
-
-<p>To select text:</p>
-<ul>
-<li>Select all the content of the entry component:
+<li>Clear the current selection:
<pre class="prettyprint">
-elm_entry_select_all(entry);
+elm_entry_select_none(entry);
</pre>
</li>
-
-<li>Deselect the current selection:
+</ul></li>
+<li>Retrieve the currently selected text:
<pre class="prettyprint">
-elm_entry_select_none(entry);
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
</pre>
+<p>If the entry text is empty, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
</li>
-
-<li>Select part of the text with the <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span> function. The following code selects the first 20 characters of the entry content.
+<li>
+<p>Copy or cut the selection to the clipboard:</p>
<pre class="prettyprint">
-elm_entry_select_region_set(entry, 0, 20);
+elm_entry_selection_cut(entry);
+</pre>
+<p>Paste the selection in the same or a different entry:</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
</pre>
</li>
+<li>Filter the text.
+<p>You can filter the size and individual characters within the entry text by appending a filter with the <span style="font-family: Courier New,Courier,monospace">elm_entry_markup_filter_append()</span> function.</p>
+<ul>
+<li>To limit the size of the entry to 8 characters:
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size
+limit_size =
+{
+ .max_char_count = 8,
+ .max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the previously created limit_size struct
+// to set the maximum number of characters allowed to 8
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre></li>
-<li>Retrieve the currently selected text in an entry:
+<li>To define a list of accepted or rejected characters, append the filter with the <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure.
+<p>The following example shows how to reject the '+', '-', '*', and '/' characters:</p>
<pre class="prettyprint">
-const char *selection;
+static Elm_Entry_Filter_Accept_Set
+accept_set =
+{
+ .accepted = NULL,
+ .rejected = "+*-/"
+};
-selection = elm_entry_selection_get(entry);
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
</pre>
+</li></ul>
</li>
</ul>
-<p>If the entry text is empty, the <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>You can define a file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>) to save the entry content. The content in the file is implicitly loaded and displayed. After the file is set, any content changes in the entry are automatically saved after a short delay.</p>
-<p>To manage the selection:</p>
-<ol>
-<li>
-<p>Copy or cut the selection to the clipboard.</p>
<pre class="prettyprint">
-elm_entry_selection_cut(entry);
+// Set the file in which the entry text is saved
+// Implicitly load the existing file content
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
</pre>
-</li>
-<li>
-<p>Paste the selection in the same or a different entry.</p>
+
+<p>You can also deactivate the automatic saving feature and explicitly save the content when needed:</p>
+
<pre class="prettyprint">
-elm_entry_selection_paste(entry);
+// Disable autosaving
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed
+elm_entry_file_save(entry);
</pre>
-</li>
-</ol>
-<h2 id="cursor">Controlling the Cursor</h2>
+<h2 id="cursor">Managing 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.</p>
-<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>
+<p>To manage the cursor position:</p>
<ul>
<li>Move the cursor to the beginning of the entry:
<pre class="prettyprint">
elm_entry_cursor_up(entry);
</pre>
</li>
-<li>Move the cursor 1 character to the left or right:
+<li>Move the cursor 1 character left or right:
<pre class="prettyprint">
elm_entry_cursor_prev(entry);
elm_entry_cursor_next(entry);
</pre>
</li>
-<li>Set the cursor at a specific position (15th character, for example):
+<li>Set the cursor at a specific position (15<sup>th</sup> character, for example):
<pre class="prettyprint">
elm_entry_cursor_pos_set(entry, 15);
</pre>
</li>
-</ul>
-<p>The following example shows how to start a selection at the current cursor position, move 5 characters to the right and end the selection.</p>
+<li>Make a text selection while moving the cursor.
+<p>The following example starts a selection at the current cursor position, moves 5 characters right, and ends the selection:</p>
<pre class="prettyprint">
elm_entry_cursor_selection_begin(entry);
}
elm_entry_cursor_selection_end(entry);
+</pre></li></ul>
+
+<h2 id="configure">Configuring the Entry</h2>
+
+<p>To configure the entry functionality:</p>
+
+<ul>
+<li>
+<p>Make the entry uneditable by the user.</p>
+<p>By default, the user can enter text in the entry component when it is in focus.</p>
+
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
</pre>
-<h2 id="formatting">Formatting Text</h2>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Even when the entry component is set to be uneditable by the user, you can still use the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_append()</span> and <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_insert()</span> functions to modify its text programmatically.</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+<li>
+<p>Set the password mode.</p>
+<p>If the password mode is set, the entry component hides what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is a single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
-<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available:</p>
+<p>When the password mode is enabled, the <span style="font-family: Courier New,Courier,monospace">elm_object_text_get()</span> function returns an UTF-8 string for user convenience.</p></li>
+<li>
+<p>Define the line mode and wrapping.</p>
+<p>The entry component has 2 line modes: single and multiline:</p>
+<ul>
+<li>
+<p>To set the entry to the 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 <strong>Enter</strong> key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+</li>
+<li>
+<p>To set the entry to the multiline mode with wrapping:</p>
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+<p>In this mode, the text wraps at the end of the entry and pressing the <strong>Enter</strong> key creates a new line.</p>
+<p>In multiline entries, the <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> function 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"><br></span>: Inserts a line break.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><ps></span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><tab></span>: Inserts a tab.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><em>...</em></span>: Emphasis. Sets the oblique style for the enclosed text.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><b>...</b></span>: Sets the bold style for the enclosed text.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><link>...</link></span>: Underlines the enclosed text.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><hilight>...</hilight></span>: Highlights the enclosed text.</li>
+ <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, character wrap</li>
</ul>
+</li>
+</ul></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"><a href = ..>...</a></span>: Anchors</li>
- <li><span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>: Items</li>
- </ul>
-<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+<h2 id="formatting">Modifying Formatting and Using Special Markups</h2>
-<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>
+<p>You can format the entry text in many ways:</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_append()</span> function appends a custom item provider to the list for that entry. You can also prepend a custom item provider to the list by using the <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_prepend()</span> function. The <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_remove()</span> function removes a custom item provider from the list.</p>
+<ul>
+<li>Format the entry text with markup elements that are defined in the theme.
+<p> For example, you can use the <span style="font-family: Courier New,Courier,monospace"><br></span> element to insert a line break. For a list of available markup elements, see <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html#entry-markup">Formatted text</a>.</p>
+</li>
+
+<li>Add special markups within the entry text:
+ <ul>
+ <li>Anchors: <span style="font-family: Courier New,Courier,monospace"><a href = ..>...</a></span>
+ <p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. The anchor 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></li>
+ <li>Items: <span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>
+ <p>The items provide 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 must be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_append()</span> function appends a custom item provider to the list for that entry. You can also prepend a custom item provider to the list with the <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_prepend()</span> function. The <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_remove()</span> function removes a custom item provider from the list.</p>
<pre class="prettyprint">
static Evas_Object
elm_object_text_set(entry, "Item Provider"
"<item size=50x50 vsize=full href=itemprovider></item>");
elm_entry_item_provider_append(entry, item_provider, NULL);
-</pre>
-
-<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 using the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span> function.</p>
+</pre></li>
+ </ul>
+</li>
+<li>Override the textblock object style.
+<p>To tweak the style of the text within the entry component, you can override parts of the theme style to the textblock object using the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span> function. The function pushes a new style on top of the user style stack that overrides the current style. Remove the style at the top of the user style stack with the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span> function.</p>
<pre class="prettyprint">
Evas_Object *entry;
<p class="figure">Figure: Overriding style</p>
<p align="center"> <img alt="Overriding style" src="../../images/entry_style.png" /> </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 =
-{
- .max_char_count = 8,
- .max_byte_count = 0
-};
-
-// Append a new callback to the list, this function is called each time
-// a text is inserted in the entry. Pass the limit_size struct previously
-// created to set the maximum number of characters allowed to 8
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
-</pre>
-
-<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the '+', '-', '*', and '/' characters.</p>
-<pre class="prettyprint">
-static Elm_Entry_Filter_Accept_Set
-accept_set =
-{
- .accepted = NULL,
- .rejected = "+*-/"
-};
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
-</pre>
-
-<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, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
-</pre>
-
-<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
-
-<pre class="prettyprint">
-// Disable autosaving
-elm_entry_autosave_set(entry, EINA_FALSE);
-
-// Trigger saving when needed
-elm_entry_file_save(entry);
-</pre>
-
-<h2 id="content_theme">Using Entry Theme Content</h2>
-
-<p>2 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>
+</li>
+<li>Modify the content and text parts of the default theme:
+<ul>
+<li>You can modify 2 content parts of the default theme: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>.
+<p>The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part:</p>
<pre class="prettyprint">
Evas_Object *icon;
ic = elm_icon_add(entry);
elm_image_file_set(ic, "icon.png", NULL);
elm_object_part_content_set(entry, "end", icon);
-</pre>
-
-<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></li>
+<li>You can modify 2 text parts of the default theme: <span style="font-family: Courier New,Courier,monospace">default</span> (entry text) and <span style="font-family: Courier New,Courier,monospace">guide</span> (entry placeholder).
+<p>The following example shows how to set the placeholder text to <span style="font-family: Courier New,Courier,monospace">Hello World</span>:</p>
<pre class="prettyprint">
-elm_object_part_text_set(entry, "Hello World");
-</pre>
+elm_object_part_text_set(entry, "guide", "Hello World");
+</pre></li></ul></li></ul>
-<h2 id="callback">Using Entry Callbacks</h2>
+<h2 id="callback">Using the Entry Callbacks</h2>
-<p>The entry component emits the following signals:</p>
+<p>To receive notifications about the entry events, listen to 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">aborted</span>: The <strong>Escape</strong> key is pressed on a single line entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The <strong>Enter</strong> 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.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: The mouse button is pressed on an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: The mouse cursor is moved into an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: The mouse cursor is moved out of an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: The mouse button is released on an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></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">changed,user</span>: The text within the entry is changed because of user interaction.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span> object.</p></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">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">focused</span>: The entry receives focus.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object.</p></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">language,changed</span>: The program language is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The mouse button is pressed and held for a couple of seconds.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: The 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">press</span>: The 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,paste</span>: A paste of the clipboard content 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>If not mentioned separately, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter in all signals is <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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(entry, "focused", focused_cb, data);
}
-// Callback function for the "focused" signal
-// This callback is called when the entry receive the focus
+// Callback for the "focused" signal
+// Called when the entry receives the focus
void
focused_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+ <li><a href="#editor">Managing the Text</a></li>
+ <li><a href="#cursor">Managing the Cursor</a></li>
+ <li><a href="#configure">Configuring the Entry</a></li>
+ <li><a href="#formatting">Modifying Formatting and Using Special Markups</a></li>
+ <li><a href="#callback">Using the Entry Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The entry component includes an Evas <a href="../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Textblock.html">Textblock</a> in it, which means that it supports the features of the textblock component, such as text wrapping and formatted markup text.</p>
+
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Entry.html">Entry</a> API.</p>
<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>Create the entry component with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and set the text inside it with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function:</p>
+<p>To create an entry component, use the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function. You can set the text inside it with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function.</p>
+
<pre class="prettyprint">
Evas_Object *entry, *parent;
elm_entry_entry_set(entry, "A short text.");
</pre>
-<h2 id="editor">Using the Text Editor</h2>
+<h2 id="editor">Managing the Text</h2>
-<p>To use the text editor:</p>
+<p>To manage the entry component content:</p>
<ul>
<li>
-<p>Append text to the end of existing content:</p>
+Add text to the entry:
+
+<ul><li>Append text to the end of the existing content:
<pre class="prettyprint">
elm_entry_entry_append(entry, "END");
</li>
<li>
<p>Insert text at the current cursor position:</p>
-
<pre class="prettyprint">
elm_entry_entry_insert(entry, "CURSOR");
-Eina_Bool Empty = elm_entry_is_empty(entry);
</pre>
-
-<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> function 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>
-</li>
+</li></ul></li>
<li>
-<p>Make the entry uneditable by the user. By default, the user can enter text in the entry component when it is in focus.</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>
- </li>
- </ul>
-
-<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>
-
+<p>Check whether the entry is empty:</p>
<pre class="prettyprint">
-elm_entry_password_set(entry, EINA_TRUE);
+Eina_Bool Empty = elm_entry_is_empty(entry);
</pre>
-
-<h2 id="wrap">Entry Line Modes and Wrapping</h2>
-
-<p>The entry component has 2 line modes:</p>
- <ul>
- <li>Single line mode</li>
- <li>Multiline mode</li>
- </ul>
-
-<p>To use entry line modes:</p>
+<p>If the entry has content, the function returns the Boolean <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> variable.</p>
+</li>
+<li>Select text:
<ul>
-<li>
-<p>Set the entry to the single line mode:</p>
+<li>Select all the content of the entry component:
<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_TRUE);
+elm_entry_select_all(entry);
</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>
</li>
-<li>
-<p>Set the entry to the multiline mode (single line off), and the text wraps at the end of the entry and pressing Enter creates a new line:</p>
+<li>Select a part of the text with the <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span> function. <p>The following example selects the first 20 characters of the entry content:</p>
<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_FALSE);
-elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+elm_entry_select_region_set(entry, 0, 20);
</pre>
-
-<p>In multiline entries, the <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> function 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>
</li>
-</ul>
-<h2 id="select">Selecting Text</h2>
-
-<p>To select text:</p>
-<ul>
-<li>Select all the content of the entry component:
+<li>Clear the current selection:
<pre class="prettyprint">
-elm_entry_select_all(entry);
+elm_entry_select_none(entry);
</pre>
</li>
-
-<li>Deselect the current selection:
+</ul></li>
+<li>Retrieve the currently selected text:
<pre class="prettyprint">
-elm_entry_select_none(entry);
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
</pre>
+<p>If the entry text is empty, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
</li>
-
-<li>Select part of the text with the <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span> function. The following code selects the first 20 characters of the entry content.
+<li>
+<p>Copy or cut the selection to the clipboard:</p>
<pre class="prettyprint">
-elm_entry_select_region_set(entry, 0, 20);
+elm_entry_selection_cut(entry);
+</pre>
+<p>Paste the selection in the same or a different entry:</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
</pre>
</li>
+<li>Filter the text.
+<p>You can filter the size and individual characters within the entry text by appending a filter with the <span style="font-family: Courier New,Courier,monospace">elm_entry_markup_filter_append()</span> function.</p>
+<ul>
+<li>To limit the size of the entry to 8 characters:
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size
+limit_size =
+{
+ .max_char_count = 8,
+ .max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the previously created limit_size struct
+// to set the maximum number of characters allowed to 8
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre></li>
-<li>Retrieve the currently selected text in an entry:
+<li>To define a list of accepted or rejected characters, append the filter with the <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure.
+<p>The following example shows how to reject the '+', '-', '*', and '/' characters:</p>
<pre class="prettyprint">
-const char *selection;
+static Elm_Entry_Filter_Accept_Set
+accept_set =
+{
+ .accepted = NULL,
+ .rejected = "+*-/"
+};
-selection = elm_entry_selection_get(entry);
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
</pre>
+</li></ul>
</li>
</ul>
-<p>If the entry text is empty, the <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>You can define a file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>) to save the entry content. The content in the file is implicitly loaded and displayed. After the file is set, any content changes in the entry are automatically saved after a short delay.</p>
-<p>To manage the selection:</p>
-<ol>
-<li>
-<p>Copy or cut the selection to the clipboard.</p>
<pre class="prettyprint">
-elm_entry_selection_cut(entry);
+// Set the file in which the entry text is saved
+// Implicitly load the existing file content
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
</pre>
-</li>
-<li>
-<p>Paste the selection in the same or a different entry.</p>
+
+<p>You can also deactivate the automatic saving feature and explicitly save the content when needed:</p>
+
<pre class="prettyprint">
-elm_entry_selection_paste(entry);
+// Disable autosaving
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed
+elm_entry_file_save(entry);
</pre>
-</li>
-</ol>
-<h2 id="cursor">Controlling the Cursor</h2>
+<h2 id="cursor">Managing 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.</p>
-<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>
+<p>To manage the cursor position:</p>
<ul>
<li>Move the cursor to the beginning of the entry:
<pre class="prettyprint">
elm_entry_cursor_up(entry);
</pre>
</li>
-<li>Move the cursor 1 character to the left or right:
+<li>Move the cursor 1 character left or right:
<pre class="prettyprint">
elm_entry_cursor_prev(entry);
elm_entry_cursor_next(entry);
</pre>
</li>
-<li>Set the cursor at a specific position (15th character, for example):
+<li>Set the cursor at a specific position (15<sup>th</sup> character, for example):
<pre class="prettyprint">
elm_entry_cursor_pos_set(entry, 15);
</pre>
</li>
-</ul>
-<p>The following example shows how to start a selection at the current cursor position, move 5 characters to the right and end the selection.</p>
+<li>Make a text selection while moving the cursor.
+<p>The following example starts a selection at the current cursor position, moves 5 characters right, and ends the selection:</p>
+
<pre class="prettyprint">
elm_entry_cursor_selection_begin(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"><br></span>: Inserts a line break.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><ps></span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><tab></span>: Inserts a tab.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><em>...</em></span>: Emphasis. Sets the oblique style for the enclosed text.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><b>...</b></span>: Sets the bold style for the enclosed text.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><link>...</link></span>: Underlines the enclosed text.</li>
- <li><span style="font-family: Courier New,Courier,monospace"><hilight>...</hilight></span>: Highlights the enclosed text.</li>
- </ul>
-
-<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"><a href = ..>...</a></span>: Anchors</li>
- <li><span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>: Items</li>
- </ul>
-
-<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+</pre></li></ul>
+
+<h2 id="configure">Configuring the Entry</h2>
-<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>
+<p>To configure the entry functionality:</p>
-<h2 id="override">Overriding Style</h2>
+<ul>
+<li>
+<p>Make the entry uneditable by the user.</p>
+<p>By default, the user can enter text in the entry component when it is in focus.</p>
-<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 using the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span> function.</p>
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
-<h2 id="filter">Filtering Text</h2>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Even when the entry component is set to be uneditable by the user, you can still use the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_append()</span> and <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_insert()</span> functions to modify its text programmatically.</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+<li>
+<p>Set the password mode.</p>
+<p>If the password mode is set, the entry component hides what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is a single line (there is no line wrap).</p>
-<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
<pre class="prettyprint">
-static Elm_Entry_Filter_Limit_Size
-limit_size =
-{
- .max_char_count = 8,
- .max_byte_count = 0
-};
-
-// Append a new callback to the list, this function is called each time
-// a text is inserted in the entry. Pass the limit_size struct previously
-// created to set the maximum number of characters allowed to 8
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+elm_entry_password_set(entry, EINA_TRUE);
</pre>
-
-<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the '+', '-', '*', and '/' characters.</p>
+</li>
+<li>
+<p>Define the line mode and wrapping.</p>
+<p>The entry component has 2 line modes: single and multiline:</p>
+<ul>
+<li>
+<p>To set the entry to the single line mode:</p>
<pre class="prettyprint">
-static Elm_Entry_Filter_Accept_Set
-accept_set =
-{
- .accepted = NULL,
- .rejected = "+*-/"
-};
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+elm_entry_single_line_set(entry, EINA_TRUE);
</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>
-
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the <strong>Enter</strong> key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+</li>
+<li>
+<p>To set the entry to the multiline mode with wrapping:</p>
<pre class="prettyprint">
-// Set the file in which the entry text is saved. This function
-// implicitly loads the existing file content
-elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
</pre>
+<p>In this mode, the text wraps at the end of the entry and pressing the <strong>Enter</strong> key creates a new line.</p>
+<p>In multiline entries, the <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> function 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, character wrap</li>
+ </ul>
+</li>
+</ul></li>
+</ul>
-<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="formatting">Modifying Formatting and Using Special Markups</h2>
-<h2 id="content_theme">Using Entry Theme Content</h2>
+<p>You can format the entry text in many ways:</p>
-<p>2 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>
+<ul>
+<li>Format the entry text with markup elements that are defined in the theme.
+<p> For example, you can use the <span style="font-family: Courier New,Courier,monospace"><br></span> element to insert a line break. For a list of available markup elements, see <a href="../../../../org.tizen.native.wearable.apireference/group__Entry.html#entry-markup">Formatted text</a>.</p>
+</li>
+
+<li>Add special markups within the entry text:
+ <ul>
+ <li>Anchors: <span style="font-family: Courier New,Courier,monospace"><a href = ..>...</a></span>
+ <p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. The anchor 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></li>
+ <li>Items: <span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>
+ <p>The items provide 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 must be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+</li>
+ </ul>
+</li>
+<li>Override the textblock object style.
+<p>To tweak the style of the text within the entry component, you can override parts of the theme style to the textblock object using the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span> function. The function pushes a new style on top of the user style stack that overrides the current style. Remove the style at the top of the user style stack with the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span> function.</p>
+</li>
+<li>Modify the content and text parts of the default theme:
+<ul>
+<li>You can modify 2 content parts of the default theme: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>.
+<p>The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part:</p>
<pre class="prettyprint">
Evas_Object *icon;
ic = elm_icon_add(entry);
elm_image_file_set(ic, "icon.png", NULL);
elm_object_part_content_set(entry, "end", icon);
-</pre>
-
-<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>
+</pre></li>
+<li>You can modify 2 text parts of the default theme: <span style="font-family: Courier New,Courier,monospace">elm.text</span> (entry text) and <span style="font-family: Courier New,Courier,monospace">elm.guide</span> (entry placeholder).
+<p>The following example shows how to set the placeholder text to <span style="font-family: Courier New,Courier,monospace">Hello World</span>:</p>
-<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
<pre class="prettyprint">
elm_object_part_text_set(entry, "elm.guide", "Hello World");
-</pre>
+</pre></li></ul></li></ul>
-<h2 id="callback">Using Entry Callbacks</h2>
+<h2 id="callback">Using the Entry Callbacks</h2>
-<p>The entry component emits the following signals:</p>
+<p>To receive notifications about the entry events, listen to 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">aborted</span>: The <strong>Escape</strong> key is pressed on a single line entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The <strong>Enter</strong> 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.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: The mouse button is pressed on an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: The mouse cursor is moved into an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: The mouse cursor is moved out of an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: The mouse button is released on an anchor.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></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">changed,user</span>: The text within the entry is changed because of user interaction.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span> object.</p></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">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">focused</span>: The entry receives focus.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object.</p></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">language,changed</span>: The program language is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The mouse button is pressed and held for a couple of seconds.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: The 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">press</span>: The 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,paste</span>: A paste of the clipboard content 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>If not mentioned separately, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter in all signals is <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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(entry, "focused", focused_cb, data);
}
-// Callback function for the "focused" signal
-// This callback is called when the entry receive the focus
+// Callback for the "focused" signal
+// Called when the entry receives the focus
void
focused_cb(void *data, Evas_Object *obj, void *event_info)
{
dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
}
-</pre>
-
+</pre>
+
<table class="note">
<tbody>
<tr>
<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="#configure">Configuring the 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>
<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>The flip component can hold 2 <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> and allows the user to flip between them using several predefined animations.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Flip.html">Flip</a> API.</p>
<h2 id="add">Adding a Flip Component</h2>
-<p>To create a flip component, use the <span style="font-family: Courier New,Courier,monospace">elm_flip_add()</span> function:</p>
+<p>To create a flip component:</p>
+
+<ol><li>Add a flip component using the <span style="font-family: Courier New,Courier,monospace">elm_flip_add()</span> function:
<pre class="prettyprint">
Evas_Object *flip, *parent, *content1, *content2;
+
flip = elm_flip_add(parent);
-</pre>
+</pre></li>
-<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>
+<li>Add content to the flip component using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">front</span> and <span style="font-family: Courier New,Courier,monospace">back</span> part names to define the 2 <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> used as content:</p>
<pre class="prettyprint">
elm_object_part_content_set(flip, "front", content1);
elm_object_part_content_set(flip, "back", content2);
-</pre>
+</pre></li></ol>
-<h2 id="configure">Configuring Flip Animation</h2>
+<h2 id="configure">Configuring the Flip Animation</h2>
-<p>Run an flip animation:</p>
+<p>To run a flip animation, use the <span style="font-family: Courier New,Courier,monospace">elm_flip_go()</span> function:</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. The following 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>To interact with the user:</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_UP</span> animation mode 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. For a complete list of animation modes, see <a href="../../../../org.tizen.native.mobile.apireference/group__Flip.html#ga24518d66196b5b634a207fd02e09250e">elm_flip_go() Remarks</a>.</p>
+
+<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 define some interaction settings as well.</p>
+
+<p>To set interaction settings to enable the user to interact with the flip:</p>
<ul>
<li>
-<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.</p>
-<p>The following modes of interaction are available:</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>Select which animation appears on the interaction.</p>
<p>To set the rotation animation:</p>
<pre class="prettyprint">
elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
</pre>
+<p>For a complete list of interaction modes, see <a href="../../../../org.tizen.native.mobile.apireference/group__Flip.html#ga9d1b9214b24f3eb7c5066f2980780e23">elm_flip_interaction_set() Remarks</a>.</p>
</li>
<li>
-<p>You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.</p>
+<p>Select which interaction directions are enabled.</p>
+<p>To enable the right and left directions only:</p>
<pre class="prettyprint">
elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
</pre>
</li>
<li>
-<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>
+<p>Set the amount of the flip that is sensitive to user interaction.</p>
+<p>To set the entire flip sensitive to make the flip easy to interact with, use the amount <span style="font-family: Courier New,Courier,monospace">1</span>:</p>
<pre class="prettyprint">
elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
</ul>
<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, 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>To receive notifications about the flip events, listen to the following signals:</p>
+
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">"animate,begin"</span>: A flip animation is started</li>
-<li><span style="font-family: Courier New,Courier,monospace">"animate,done"</span>: A flip animation is finished</li>
+<li><span style="font-family: Courier New,Courier,monospace">"animate,begin"</span>: The flip animation is started.</li>
+<li><span style="font-family: Courier New,Courier,monospace">"animate,done"</span>: The flip animation is finished.</li>
</ul>
-<p>To register a callback on the <span style="font-family: Courier New,Courier,monospace">"animation,begin"</span> signal:</p>
+<p>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">animate,begin</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
}
-// Callback function for the "animate,begin" signal
-// This callback is called when the flip animation starts
+// Callback for the "animate,begin" signal
+// Called when the flip animation starts
void
anim_start_cb(void *data, Evas_Object *obj, void *event_info)
{
<ul class="toc">
<li><a href="#add">Adding a Flipselector Component</a></li>
<li><a href="#configure">Configuring the Flipselector</a></li>
- <li><a href="#items">Adding Items</a></li>
- <li><a href="#value">Changing the Values</a></li>
+ <li><a href="#items">Adding Flipselector Items</a></li>
+ <li><a href="#value">Changing the Flipselector Value</a></li>
<li><a href="#callback">Using the Flipselector Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<pre class="prettyprint">
Evas_Object *flipselector, *parent;
+
flipselector = elm_flipselector_add(parent);
</pre>
<h2 id="configure">Configuring the Flipselector</h2>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_first_interval_set()</span> function to set the interval for a user's mouse button hold on a flipselector. After this interval, the text is changed regularly while the mouse button remains held down.</p>
+<p>You can define the length of the first change interval when the user keeps the mouse button down for a longer period. After the first interval, the flipselector text is changed regularly while the mouse button remains down.</p>
+
+<p>To set the first interval, use the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_first_interval_set()</span> function:</p>
<pre class="prettyprint">
elm_flipselector_first_interval_set(flipselector, 2.0);
</pre>
-<h2 id="items">Adding Items</h2>
+<h2 id="items">Adding Flipselector Items</h2>
-<p>The following example shows how to add an item object with the number "99". By passing the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback as a parameter, the callback is called when the item is selected.</p>
+<p>To add flipselector items:</p>
+<ol>
+<li>
+<p>Add a flipselector item with the number "99", calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when this item is selected:</p>
<pre class="prettyprint">
Elm_Object_Item *flip_it;
-flip_it = elm_flipselector_item_append(flipselector, "99", it_select_cb, NULL);
-// Callback function called when the flip_it object is selected
+flip_it = elm_flipselector_item_append(flipselector, "99", it_select_cb, NULL);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_append()</span> function appends the items to the existing ones. It is also possible to prepend flipselector items with the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_prepend()</span> function.</p>
+</li>
+<li>
+<p>Define the smart callback:</p>
+<pre class="prettyprint">
+// Called when the flip_it object is selected
void
it_select_cb(void *data, Evas_Object *obj, void *event_info)
{
dlog_print(DLOG_INFO, LOG_TAG, "flip_it selected\n");
}
</pre>
+</li>
+</ol>
-<p>An item can be prepended with the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_prepend()</span> function.</p>
-
-
-<h2 id="value">Changing the Values</h2>
-<p>To change the values:</p>
+<h2 id="value">Changing the Flipselector Value</h2>
+<p>To change the value:</p>
<ul>
<li>
<p>Show the next text using the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_flip_next()</span> function:</p>
</pre>
</li>
<li>
-<p>Show the text of the specific item using the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_selected_set()</span> function. When this function sets <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> to the selected item, the flipselector shows the text of the first item.</p>
+<p>Show the text of the specific item using the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_selected_set()</span> function.</p>
+<p>If the second parameter is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the flipselector shows the text of the first item.</p>
<pre class="prettyprint">
elm_flipselector_item_selected_set(flip_it, EINA_TRUE);
</pre>
<h2 id="callback">Using the Flipselector Callbacks</h2>
-<p>The flipselector component emits the following signals:</p>
+<p>To receive notifications about the flipseletor events, listen to the following signals:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">selected</span>: The flipselector's selected text item is changed.</li>
<li><span style="font-family: Courier New,Courier,monospace">overflowed</span>: The flipselector's current selection is changed from the first item to the last one.</li>
<li><span style="font-family: Courier New,Courier,monospace">underflowed</span>: The flipselector's current selection is changed from the last item to the first one.</li>
</ul>
-<p>When the user selects an item in the flipselector, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The following example shows how to implement a callback function for this signal.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">selected</span> signal:</p>
<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(flipselector, "selected", _flip_selected_cb, NULL);
+}
+
+// Callback for the "selected" signal
+// Called when the flipselector value changes
static void
_flip_selected_cb(void *data, Evas_Object *obj, void *event_info)
{
// Code that does the desired action
}
</pre>
-<p>This callback function can be registered with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function:</p>
-<pre class="prettyprint">
-evas_object_smart_callback_add(flipselector, "selected", _flip_selected_cb, NULL);
-</pre>
<table class="note">
<tbody>
<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>Focus is a graphical user interface concept. A component, such as 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, only 1 focused object to determine where the input event goes to within the application window. Also, focused objects can be decorated differently 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.
+<li>Direct selection
+<p>This is done by clicking on the element.</p>
<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.
+<li>Relative selection
+<p>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>
<p>Relative selection' 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>
+<p>The order the focus goes from a UI component to another is called the focus chain. 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>
+<p>An object can be focused if all of the following conditions apply:</p>
<ul>
-<li>object is visible</li>
-<li>object is enabled</li>
-<li>object accepts focus</li>
-<li>object's subtree (if any) is focusable</li>
-<li>all of object's parents have their subtrees focusable</li>
+<li>Object is visible</li>
+<li>Object is enabled</li>
+<li>Object accepts focus</li>
+<li>Object's subtree (if any) is focusable</li>
+<li>All of object's parents have their subtrees focusable</li>
</ul>
<p>If any of these conditions do not apply, the object is unfocusable.</p>
<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>
+<p>Handling of the keys is done automatically by Elementary. According to which key is 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>
+<h3>Managing Focus</h3>
+<p>To manage focus:</p>
+<ul>
+<li>Hide, delete, or disable focus
<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>
-
+</li>
+<li>Focus to the next object
+<p>When the user wants to switch the focus to the next object, Elementary searches the first focusable object.</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>
+</li>
+</ul>
<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>
+<p>There are several reasons for customizing 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's Focus Exit Chain </h3>
+<p>To customize the focus chain:</p>
-<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>Customizing the object's focus exit chain
+<p>Set the object to focus after another object in a specific direction using the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set()</span> function. The third parameter is the direction, which can be one of the following:</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_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's Focus Chain</h3>
-
-<p>To customize the application's custom chain:</p>
+<p>Get the next object in a specific direction using the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get()</span> function.</p>
+</li>
+<li>Customizing the whole application's focus chain
+<p>To customize the application's focus 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.
+// The chain is obj3 followed by 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);
<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>This applies to any container. It is possible to set the focus chain of a box, for example.</p>
+</li>
+<li>Colliding focus chains
<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>
+</li>
+</ul>
<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>If the Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component if applicable.</p>
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event "focused" or "unfocused"</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get()</span> function to set whether a specific object has the focus. Set the focus to an object using the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set()</span> function, where the second parameter 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 the <span style="font-family: Courier New,Courier,monospace;">evas_object_show()</span> function has been called. Call the function back when the object receives or loses focus by registering the smart event "focused" or "unfocused"</p>
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set()</span> function, where the second parameter is a Boolean value, to tell Elementary whether an object and its children are focusable. Get the current value using the <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get()</span> function.</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>
+<p>The similar functions for a specific object are the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set()</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get()</span> functions. </p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#add">Adding a Gengrid Component</a></li>
- <li><a href="#style">Using Gengrid and Item Styles</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>
+ <li><a href="#style">Using the Gengrid and Item Styles</a></li>
+ <li><a href="#create">Defining the Gengrid Item Class</a></li>
+ <li><a href="#manage">Managing Gengrid Items</a></li>
+ <li><a href="#callback">Using the Gengrid Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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. Similar to the genlist, callbacks are called at item creation or deletion.</p>
+<p>The gengrid component is based on the same idea as the <a href="component_genlist_mn.htm">genlist</a>. It aims at displaying objects on a grid layout and rendering only the visible ones.</p>
-<p>The gengrid component inherits from the layout component and implements the scroller interface, which means that scroller and layout functions can be used with the gengrid component.</p>
+<p>The gengrid component inherits from the layout component and implements the scroller interface, which means that scroller and layout functions can be used on the gengrid component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Gengrid.html">Gengrid</a> API.</p>
-<p>A gengrid can display its items using a horizontal or vertical layout. In the horizontal 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 vertical layout, 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>To add a gengrid component, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *gengrid, *parent;
+
gengrid = elm_gengrid_add(parent);
</pre>
-<h2 id="style">Using Gengrid and Item Styles</h2>
+<h2 id="style">Using the Gengrid and Item Styles</h2>
+
+<p>A gengrid item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. The number of texts and contents depends on the Edje item theme style used for the gengrid items. In the <span style="font-family: Courier New,Courier,monospace">default</span> Tizen gengrid item theme style, the items can have 2 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>
<p>The following gengrid styles and related item styles are supported:</p>
<p class="figure">Figure: Gengrid styles</p>
<p align="center"> <img alt="Gengrid styles" src="../../images/gengrid_styles.png" /> </p>
-<h2 id="create">Creating and Deleting 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 texts and contents depends on the theme used for the gengrid items. In the default Tizen gengrid item theme, the items can have 2 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">Defining the Gengrid Item Class</h2>
-<p>As in the genlist, to save up memory and speed up processing when many items exist, the gengrid has the concept of realization when managing items. It means that a gengrid item creates its text and content when the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). Text and content are retrieved by calling the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> functions defined in the gengrid item class.</p>
+<p>To save up memory and speed up processing when many items exist, the gengrid has the concept of "realization" when managing items. It means that a gengrid item creates its text and content when the user scrolls the grid and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure (gengrid item class) that informs the gengrid component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> functions defined in the gengrid item class.</p>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> for the following purposes:</p>
+<p>You can use the gengrid item class for the following purposes:</p>
<ul><li>Setting the item style</li>
<li>Registering callback functions for item realization</li>
<li>Registering a callback function for item deletion</li></ul>
elm_gengrid_item_class_free(gic);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure in the gengrid item class contains pointers to functions that are called when an item is going to be realized or deleted. All of them receive item data (third parameter of the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span> function) as their first parameter and the gengrid object itself as the second parameter.</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 realized or deleted. All of them receive item data (third parameter of the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span> function) as their first parameter and the gengrid object itself as the second parameter.</p>
-<p>The gengrid item class must be freed manually with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_class_free()</span> function after appending items is finished. To delete a gengrid item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function. You can also use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function to clear all items. If a gengrid object is deleted by the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function, all items are deleted automatically. On item deletion, the <span style="font-family: Courier New,Courier,monospace">del</span> function in the item class is called.</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">text_get</span>
</pre></li>
<li><span style="font-family: Courier New,Courier,monospace">content_get</span>
-<p>As the <span style="font-family: Courier New,Courier,monospace">text_get</span> function, the <span style="font-family: Courier New,Courier,monospace">content_get</span> function is also called repeatedly for all swallow parts in the item. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or a valid object handle to be set. The object is deleted by the gengrid on its deletion or when the item is unrealized.</p>
+<p>As the <span style="font-family: Courier New,Courier,monospace">text_get</span> function, the <span style="font-family: Courier New,Courier,monospace">content_get</span> function is also called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <span style="font-family: Courier New,Courier,monospace">NULL</span> (when no content is desired). The object is deleted by the gengrid on its deletion or when the item is unrealized.</p>
<pre class="prettyprint">
static Evas_Object *
}
</pre></li>
<li><span style="font-family: Courier New,Courier,monospace">del</span>
-<p>This function is called when the gengrid item is deleted. It deletes any data which were allocated at the item creation.</p>
+<p>This function is called when the gengrid item is deleted. It deletes any data that has been allocated at the item creation.</p>
<pre class="prettyprint">
static void
</pre></li>
</ul>
-<h2 id="manage">Managing Items</h2>
+<p>The gengrid item class must be freed manually with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_class_free()</span> function after all items are appended.</p>
+
+<h2 id="manage">Managing Gengrid Items</h2>
<p>To manage the items:</p>
<ul>
<li>Add items:
-<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>
-</li>
-<li>
-<p>Select multiple items:</p>
-<p>To select multiple items, use the multiselection mode:</p>
+<ul><li>To add an item to the end of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span> function.</li>
+<li>To add an item to the beginning of the grid, use the similar <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span> function.</li>
+<li>To insert an item before the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span> function.</li>
+<li>To insert an item after the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> function.</li>
+</ul>
+
+<p>A gengrid can display its items using a horizontal or vertical layout. In the horizontal 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 vertical layout, items are set in rows from left to right. By default, the vertical layout is used. To set the horizontal layout:</p>
<pre class="prettyprint">
-elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+elm_gengrid_horizontal_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 selected items.</p>
+</li>
+<li>Delete items and clear the grid:
+<ul><li>To delete a single gengrid item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function.</li>
+<li>To clear the grid and delete all items, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</li>
+</ul>
+<p>If a gengrid object is deleted by the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function, all items are deleted automatically. On item deletion, the <span style="font-family: Courier New,Courier,monospace">del</span> function in the item class is called.</p>
</li>
<li>Update items:
-<p>When the content of an item changes, you can call the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> function to ask the gengrid to update this item. The gengrid re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Gengrid_Item_Class</span> for it.</p>
-<p>If you want to change some parts of the items, you can also use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_fields_update()</span> function for the specific parts:</p>
+<p>If the content of an item changes, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> function for the gengrid to update the item. The gengrid re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Gengrid_Item_Class</span> class for it.</p>
+
+<p>You can also use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_fields_update()</span> function to update only specific parts:</p>
<ul><li><span style="font-family: Courier New,Courier,monospace">ELM_GENGRID_ITEM_FIELD_TEXT</span></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_GENGRID_ITEM_FIELD_CONTENT</span></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_GENGRID_ITEM_FIELD_STATE</span></li></ul>
</li>
<li>Select or disable items:
-<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>
+<p>To manually select an item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> function. To select multiple items, you must enable the multi-selection mode:</p>
+<pre class="prettyprint">
+elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+</pre>
+<p>To retrieve the selected item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_item_get()</span> function. When the multi-selection mode is enabled, you can retrieve the selected items with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span> function, which returns a list of all selected items.</p>
+
+<p>To disable an item manually, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> function.</p>
</li>
</ul>
-<h2 id="callback">Using Gengrid Callbacks</h2>
+<h2 id="callback">Using the Gengrid Callbacks</h2>
-<p>The gengrid component emits the following signals:</p>
+<p>To receive notifications about the gengrid events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar). 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 item is double-clicked. 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">clicked,right</span>: The item is right-clicked. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is right-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 item is selected. 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 item is unselected. 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 is created as a real evas object. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter 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>: The item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter 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">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">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the gengrid item that is double-clicked or pressed.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the gengrid item that is double-clicked.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,right</span>: The item is right-clicked.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the gengrid item that is right-clicked.</p></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 1 second.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the gengrid item that is selected.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the gengrid item that is unselected.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the created item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: The item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be unrealized.</p></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>: The scrolling animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The 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">moved</span>: The item in the gengrid is moved.</li>
<li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The item in the gengrid is pressed by the action pressing the mouse.</li>
<li><span style="font-family: Courier New,Courier,monospace">released</span>: The item in the gengrid is released by the action releasing the mouse.</li>
- <li><span style="font-family: Courier New,Courier,monospace">item,reorder,anim,start</span>: When the reorder animation starts.</li>
- <li><span style="font-family: Courier New,Courier,monospace">item,reorder,anim,stop</span>: When the reorder animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">item,reorder,anim,start</span>: The reorder animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">item,reorder,anim,stop</span>: The reorder animation stops.</li>
</ul>
<table class="note">
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#add">Adding a Genlist Component</a></li>
- <li><a href="#styles">Defining the Genlist and Item Style</a></li>
- <li><a href="#items">Creating and Deleting Items</a></li>
- <li><a href="#manage">Managing Items</a></li>
- <li><a href="#selection">Selecting Items</a></li>
- <li><a href="#callback">Using Genlist Callbacks</a></li>
+ <li><a href="#styles">Using the Genlist and Item Styles</a></li>
+ <li><a href="#items">Defining the Genlist Item Class</a></li>
+ <li><a href="#manage">Managing Genlist Items</a></li>
+ <li><a href="#selection">Selecting Genlist Items</a></li>
+ <li><a href="#callback">Using the Genlist Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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 items while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
+<p>Genlist is a UI component that displays a scrollable list of items. It allows you to manage a lot of items while still being fast and having 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> and the <a href="../../../../org.tizen.native.mobile.apireference/group__Genlist.html">Genlist</a> API.</p>
<p>To add a genlist component, use 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="styles">Defining the Genlist and Item Style</h2>
-<p>The genlist can have 2 styles, for itself or for its items.</p>
+<h2 id="styles">Using the Genlist and Item Styles</h2>
+<p>The genlist has a separate style for itself or for its items:</p>
-<p>The genlist style determines the figure or characteristics of the entire scrollable area. The following genlist styles are available:</p>
+<ul><li>
+<p>The genlist style determines the characteristics of the entire scrollable area. The following genlist styles are available:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">default</span>
<li><span style="font-family: Courier New,Courier,monospace">solid/handler</span></li>
</ul>
-<p>In Tizen 2.4, the genlist items have a gradient opacity from the top to the bottom rather than an explicit divider. Each item is identified by its color made by blending its opacity and background color (or image).</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">solid</span> prefix in a genlist style name means that genlist items have a divider and background color. The following example sets a genlist with a solid background color.</p>
+<p>In Tizen 2.4, the genlist items have a gradient opacity from the top to the bottom rather than an explicit divider. Each item is identified by its color made by blending its opacity and background color (or image). The <span style="font-family: Courier New,Courier,monospace">solid</span> prefix in a genlist style name means that genlist items have an explicit divider and background color. To set a genlist with a solid background color:</p>
<pre class="prettyprint">
elm_object_style_set(genlist, "solid/default");
-</pre>
+</pre></li>
+<li>
<p>The genlist item style determines the number of parts for text and content, and their arrangement within the item. For example, a default style item has 1 text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), and 2 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>).</p>
<p>The following item styles are available:</p>
<p>For more information on creating a new genlist item style, see <a href="component_custom_n.htm">Customizing Components</a>.</p>
+</li></ul>
-<h2 id="items">Creating and Deleting Items</h2>
+<h2 id="items">Defining the Genlist Item Class</h2>
-<p>To save up memory and speed up processing when many items exist, the genlist has the concept of realization when managing items. It means that a genlist item creates its text and content when the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). Text and content are retrieved by calling the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> functions defined in the genlist item class.</p>
+<p>To save up memory and speed up processing when many items exist, the genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> functions defined in the genlist item class.</p>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> for the following purposes:</p>
+<p>You can use the genlist item class for the following purposes:</p>
<ul><li>Setting the item style</li>
<li>Registering callback functions for item realization</li>
<li>Registering a callback function for item deletion</li></ul>
_item_select, // Select callback
(void *)i); // Callback data
}
-Elm_genlist_item_class_free(itc);
+elm_genlist_item_class_free(itc);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure in the genlist item class contains pointers to functions that are called when an item is going to be realized or deleted. All of them receive item data (third parameter of the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function) as their first parameter and the genlist object itself as the second parameter.</p>
-<p>The genlist item class must be freed manually with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_free()</span> function after appending items is finished.
-To delete a genlist item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function. You can also use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span> function to clear all items. If a genlist object is deleted by the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function, all items are deleted automatically. On item deletion, the <span style="font-family: Courier New,Courier,monospace">del</span> function in the item class is called.</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 realized or deleted. All of them receive item data (third parameter of the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function) as their first parameter and the genlist object itself as the second parameter.</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">text_get</span>
</pre></li>
<li><span style="font-family: Courier New,Courier,monospace">content_get</span>
-<p>As the <span style="font-family: Courier New,Courier,monospace">text_get</span> function, the <span style="font-family: Courier New,Courier,monospace">content_get</span> function is also called repeatedly for all swallow parts in the item. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or a valid object handle to be set. The object is deleted by the genlist on its deletion or when the item is unrealized.</p>
+<p>As the <span style="font-family: Courier New,Courier,monospace">text_get</span> function, the <span style="font-family: Courier New,Courier,monospace">content_get</span> function is also called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <span style="font-family: Courier New,Courier,monospace">NULL</span> (when no content is desired). The object is deleted by the genlist on its deletion or when the item is unrealized.</p>
<pre class="prettyprint">
static Evas_Object *
</pre></li>
</ul>
-<h2 id="manage">Managing Items</h2>
+<p>The genlist item class must be freed manually with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_free()</span> function after all items are appended.</p>
+
+<h2 id="manage">Managing Genlist Items</h2>
<p>To manage items:</p>
<ul>
<li>Add items:
-<p>To add an item, several functions can be used. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function 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. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> function is otherwise the same but adds to the beginning of the list or parent list. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> function inserts an item before the indicated item, and the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> function inserts an item after the indicated item.</p>
+<ul><li>To add 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), use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function.</li>
+<li>To add an item to the beginning of the list or parent list, use the similar <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> function.</li>
+<li>To insert an item before the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> function.</li>
+<li>To insert an item after the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> function.</li>
+</ul>
<p>The functions take one of the following <span style="font-family: Courier New,Courier,monospace">type</span> parameters:</p>
<ul>
</ul>
</li>
-<li>Clear the list:
-<p>The application clears the list with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span> function, which deletes all the items in the list. The <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function deletes a specific item. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function clears all items that are children of the indicated parent item.</p>
+<li>Delete items and clear the list:
+<ul><li>To delete a single genlist item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function.</li>
+<li>To clear the list and delete all items, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span> function.</li>
+<li>To delete all items that are children of the indicated parent item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function.</li>
+</ul>
+<p>If a genlist object is deleted by the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function, all items are deleted automatically. On item deletion, the <span style="font-family: Courier New,Courier,monospace">del</span> function in the item class is called.</p>
</li>
<li>Inspect list elements:
<p>To help inspect the list items, move to the item at the top of the list with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span> function, which returns the item pointer. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> function moves to the item at the end of the list. The <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> functions 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>
<p>The <span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> function returns the data pointer set by the item creation functions.</p>
</li>
<li>Update items:
-<p>If an item changes (text or content change), use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> function 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> class for it.</p>
+<p>If an item changes (text or content change), use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> function for the genlist to update the item. The genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> class for it.</p>
<p>You can also use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_fields_update()</span> function to update only specific parts:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_FIELD_CONTENT</span></li></ul>
</li>
<li>Change the genlist and item size:
-<p>The genlist and item size can be changed by the <span style="font-family: Courier New,Courier,monospace">elm_genlist_mode_set()</span> function:</p>
+<p>The genlist and item size can be managed through the mode set by the <span style="font-family: Courier New,Courier,monospace">elm_genlist_mode_set()</span> function:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>
-<p>The genlist respects its container's geometry. Even though there are any items exceeding the genlist in transverse axis, the genlist is not scrollable in that direction.</p></li>
+<p>The genlist respects its container's geometry. Even if there are any items exceeding the genlist in the transverse axis, the genlist is not scrollable in that direction.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span>
-<p>Same as <span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>, but if there are any items exceeding the genlist in transverse axis, genlist is scrollable in that direction.</p></li>
+<p>Same as <span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>, but if there are any items exceeding the genlist in the transverse axis, the genlist is scrollable in that direction.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>
<p>Sets a minimum size hint on the list object, so that containers can respect it. A minimum size hint is set for its transverse axis, so that the largest item in that direction fits well.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_EXPAND</span>
</li>
</ul>
-<h2 id="selection">Selecting Items</h2>
+<h2 id="selection">Selecting Genlist Items</h2>
+
+<p>To select or deselect items manually, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> function. To expand or contract a tree item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function.</p>
-<p>Items are manually selected or deselected with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> function or disabled with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> function. In case there is a tree 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>
+<p>To prevent a selection, you can disable an item with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> function.</p>
<table class="note">
<tbody>
</tbody>
</table>
-<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> function 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> function returns a list of the currently selected items.</p>
+<p>By default, the genlist is in a single-selection mode: only one item can be selected at a time and you can use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function to retrieve the selected item.</p>
+<p>To activate the multi-selection mode, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> function. If several items are selected, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> function to return a list of the currently selected items.</p>
-<p>In the following figure, the 3rd item is disabled and 5th and 6th item are selected in the multi-selection mode. (The check component works independently of the genlist item; unless it receives an event directly, you must change its state manually in the <span style="font-family: Courier New,Courier,monospace">selected</span> callback of the genlist item.)</p>
+<p>In the following figure, the 3<sup>rd</sup> item is disabled and the 5<sup>th</sup> and 6<sup>th</sup> item are selected in the multi-selection mode. (The check component works independently of the genlist item; unless it receives an event directly, you must change its state manually in the <span style="font-family: Courier New,Courier,monospace">selected</span> callback of the genlist item.)</p>
<p class="figure">Figure: Genlist item selection highlight</p>
<p align="center"> <img alt="Genlist item selection highlight" src="../../images/genlist_multi.png"/> </p>
-<h2 id="callback">Using Genlist Callbacks</h2>
+<h2 id="callback">Using the Genlist Callbacks</h2>
-<p>The genlist component emits the following signals:</p>
+<p>To receive notifications about the genlist events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar). <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 item is double-clicked. <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 item is selected. 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 item is unselected. <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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function 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">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the activated item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the double-clicked item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the selected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the unselected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback fills in the child items.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be expanded.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback deletes the child items.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be contracted.</p></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 whether the item can expand (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be expanded.</p></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 whether the item can contract (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be contracted.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be created.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be deleted.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></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 1 second.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pressed item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The scrolling is ongoing.</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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program's language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
- <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
- <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The genlist item is pressed by mouse 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">released</span>: The genlist item is released by mouse 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">edge,top</span>: The genlist is scrolled to the top edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch-swiped left.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch-swiped right.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch-swiped up.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch-swiped down.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch-pinched out.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch-pinched in.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></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 next item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program language is changed.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The genlist item is pressed by mouse down.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pressed item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">released</span>: The genlist item is released by mouse up.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the released item.</p></li>
</ul>
<table class="note">
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#styles">Defining the 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">Selecting Items</a></li>
- <li><a href="#callback">Using Genlist Callbacks</a></li>
+ <li><a href="#styles">Using the Genlist Item Styles</a></li>
+ <li><a href="#items">Defining the Genlist Item Class</a></li>
+ <li><a href="#manage">Managing Genlist Items</a></li>
+ <li><a href="#selection">Selecting Genlist Items</a></li>
+ <li><a href="#callback">Using the Genlist Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>Genlist is a UI component that displays a scrollable list of items. It allows you to manage a lot of items while still being fast and having 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> and the <a href="../../../../org.tizen.native.wearable.apireference/group__Genlist.html">Genlist</a> API.</p>
<p class="figure">Figure: Genlist hierarchy</p>
<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p>
-<h2 id="styles">Defining the Genlist Item Style</h2>
+<h2 id="add">Adding a Genlist Component</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 1 text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), 2 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>To add a genlist component, use 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="styles">Using the Genlist Item Styles</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. The 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 1 text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), 2 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>
<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>
+<h2 id="items">Defining the Genlist Item Class</h2>
-<p>To add a genlist component, use 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>
+<p>To save up memory and speed up processing when many items exist, the genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.</p>
-<h2 id="items">Creating and Deleting Items</h2>
+<p>You can use the genlist item class for the following purposes:</p>
+<ul><li>Setting the item styles</li>
+<li>Registering callback functions for item realization</li>
+<li>Registering a callback function for item deletion</li></ul>
-<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, create and fill 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();
<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> function 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>
+<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 realized 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> function and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">text_get</span>
- <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+ <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">content_get</span>
- <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+ <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. The function returns a valid object handle or <span style="font-family: Courier New,Courier,monospace">NULL</span> (when no content is desired). The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">state_get</span>
- <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter's theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> parameter, when the state is true. xxx is the name of the (state) part.</p></li>
+ <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. When the state is true, the genlist emits a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter's theming Edje object using <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as the <span style="font-family: Courier New,Courier,monospace">emission</span> parameter and <span style="font-family: Courier New,Courier,monospace">elm</span> as the <span style="font-family: Courier New,Courier,monospace">source</span> parameter. 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>
+<h2 id="manage">Managing Genlist Items</h2>
<p>To manage items:</p>
<ul>
<li>Add items:
-<p>To add an item, several functions can be used. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function 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. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> function is otherwise the same but adds to the beginning of the list or children lists. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> function inserts an item before the indicated item and the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> function inserts an item after the indicated item.</p>
+<ul><li>To add 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), use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function.</li>
+<li>To add an item to the beginning of the list or parent list, use the similar <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> function.</li>
+<li>To insert an item before the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> function.</li>
+<li>To insert an item after the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> function.</li>
+</ul>
<p>The functions take one of the following <span style="font-family: Courier New,Courier,monospace">type</span> parameters:</p>
<ul>
</li>
-<li>Clear the list:
-<p>The application clears the list with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span> function, which deletes all the items in the list. The <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function deletes a specific item. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function clears all items that are children of the indicated parent item.</p>
+<li>Delete items and clear the list:
+<ul><li>To delete a single genlist item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function.</li>
+<li>To clear the list and delete all items, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span> function.</li>
+<li>To delete all items that are children of the indicated parent item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function.</li>
+</ul>
</li>
<li>Inspect list elements:
<p>To help inspect the list items, move to the item at the top of the list with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span> function, which returns the item pointer. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> function moves to the item at the end of the list. The <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> functions 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>
</li>
</ul>
-<h2 id="selection">Selecting Items</h2>
+<h2 id="selection">Selecting Genlist Items</h2>
-<p>Items are manually selected or deselected with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> function or disabled with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> function. 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>
+<p>To select or deselect items manually, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> function. To expand or contract a tree or group item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function.</p>
+
+<p>To prevent a selection, you can disable an item with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> function.</p>
<table class="note">
<tbody>
</tbody>
</table>
-<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> function 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> function returns a list of the current selected items.</p>
+<p>By default, the genlist is in a single-selection mode: only one item can be selected at a time and you can use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function to retrieve the selected item.</p>
+<p>To activate the multi-selection mode, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> function. If several items are selected, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> function to return a list of the currently selected items.</p>
-<p>In the following figure, the first item is disabled and third and fourth item are selected in the multi-selection mode. </p>
+<p>In the following figure, the first item is disabled and 3<sup>rd</sup> and 4<sup>th</sup> item are selected in the multi-selection mode. </p>
<p class="figure">Figure: Genlist item selection highlight</p>
<p align="center"> <img alt="Genlist item selection highlight" src="../../images/genlist_multi_wn.png"/> </p>
-<h2 id="callback">Using Genlist Callbacks</h2>
+<h2 id="callback">Using the Genlist Callbacks</h2>
-<p>The genlist component emits the following signals:</p>
+<p>To receive notifications about the genlist events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar). <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 item is double-clicked. <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 item is selected. 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 item is unselected. <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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> function. 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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program's language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
- <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the activated item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the double-clicked item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the selected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the unselected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback fills in the child items.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be expanded.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback deletes the child items.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be contracted.</p></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 whether the item can expand (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be expanded.</p></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 whether the item can contract (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be contracted.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be created.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be deleted.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></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 1 second.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pressed item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch-swiped left.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch-swiped right.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch-swiped up.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch-swiped down.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch-pinched out.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch-pinched in.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></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 the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></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 next item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program language is changed.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+
+
+
+
</ul>
<table class="note">
<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>
+ <li><a href="#use">Configuring the GLView</a></li>
+ <li><a href="#callback">Using the GLView Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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> and the <a href="../../../../org.tizen.native.mobile.apireference/group__GLView.html">OpenGL</a> API.</p>
+<p>The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity.</p>
+<p>For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a> and the <a href="../../../../org.tizen.native.mobile.apireference/group__GLView.html">GLView</a> API.</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 component</p>
+ <p align="center"><img alt="GLView component" 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>
+<p>To create a GLView component:</p>
+
+<ol>
+<li>Add a GLView component using the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function:
<pre class="prettyprint">
Evas_Object *glview, *parent;
glview = elm_glview_add(parent);
-</pre>
+</pre></li>
-<p>Set the size of the GLView to 200x200 pixels:</p>
+<li>Set the size of the GLView.
+<p>To set the size to 200 x 200 pixels:</p>
<pre class="prettyprint">
elm_glview_size_set(glview, 200, 200);
</pre>
+</li></ol>
+<h2 id="use">Configuring the GLView</h2>
-<h2 id="use">Using the GLView API</h2>
-
-<p>To use the GLView:</p>
-
-<ol>
-<li>
-<p>Configure the GLView rendering mode by activating the following rendering modes:</p>
+<p>To configure the GLView:</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>
+<li>
+<p>Enable the appropriate GLView rendering modes. The <a href="../../../../org.tizen.native.mobile.apireference/group__GLView.html#ga4d0a2281e13c66d7274987ef24e7abe7">Elm_GLView_Mode</a> enumerator defines the available modes.</p>
-<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<p>To enable the alpha channel and depth buffer rendering modes:</p>
<pre class="prettyprint">
elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
</pre>
</li>
<li>
-<p>Set the resize policy. The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<p>Set the resize policy.</p>
+<p>To set a policy that decides 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 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 which case only the image object is scaled, not the underlying GL surface.</p>
</li>
<li>
-<p>Set the GLView rendering policy:</p>
+<p>Set the GLView rendering policy.</p>
+<p>To always redraw the GLView component during the rendering loop:</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>The rendering policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), in which case the GLView component is redrawn only when it is visible.</p>
</li>
<li>
-<p>Register the callbacks:</p>
-
+<p>Register callbacks for managing changes in the GLView component state:</p>
+<ul>
+<li>The initialization callback is called at the GLView component creation.</li>
+<li>The deletion callback is called when the GLView component is deleted.</li>
+<li>The resize callback is called during the rendering loop when the GLView component is resized.</li>
+<li>The render callback is called when the GLView component must be redrawn.</li>
+</ul>
<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 <span style="font-family: Courier New,Courier,monospace">init</span> 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 <span style="font-family: Courier New,Courier,monospace">del</span> 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>
</li>
-</ol>
+</ul>
-<h2 id="callback">Using GLView Callbacks</h2>
+<h2 id="callback">Using the GLView Callbacks</h2>
-<p>The GLView component emits the following signals:</p>
+<p>To receive notifications about the GLView events, listen to 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">focused</span>: The GLView component is focused.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
</ul>
-<p>To register a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(glview, "focused", focused_cb, data);
}
-// Callback function for the "focused" signal
-// This callback is called when the GLView is focused
+// Callback for the "focused" signal
+// Called when the GLView is focused
void
focused_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+ <li><a href="#use">Configuring the GLView</a></li>
+ <li><a href="#callback">Using the GLView Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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> and the <a href="../../../../org.tizen.native.wearable.apireference/group__GLView.html">OpenGL</a> API.</p>
+<p>The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity.</p>
+<p>For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a> and the <a href="../../../../org.tizen.native.wearable.apireference/group__GLView.html">GLView</a> API.</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 component</p>
+ <p align="center"><img alt="GLView component" 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>
+<p>To create a GLView component:</p>
+
+<ol>
+<li>Add a GLView component using the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function:
<pre class="prettyprint">
Evas_Object *glview, *parent;
glview = elm_glview_add(parent);
-</pre>
+</pre></li>
-<p>Set the size of the GLView to 200x200 pixels:</p>
+<li>Set the size of the GLView.
+<p>To set the size to 200 x 200 pixels:</p>
<pre class="prettyprint">
elm_glview_size_set(glview, 200, 200);
</pre>
+</li></ol>
+<h2 id="use">Configuring the GLView</h2>
-<h2 id="use">Using the GLView API</h2>
-
-<p>To use the GLView:</p>
-
-<ol>
-<li>
-<p>Configure the GLView rendering mode by activating the following rendering modes:</p>
+<p>To configure the GLView:</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>
+<li>
+<p>Enable the appropriate GLView rendering modes. The <a href="../../../../org.tizen.native.wearable.apireference/group__GLView.html#ga4d0a2281e13c66d7274987ef24e7abe7">Elm_GLView_Mode</a> enumerator defines the available modes.</p>
-<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<p>To enable the alpha channel and depth buffer rendering modes:</p>
<pre class="prettyprint">
elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
</pre>
</li>
<li>
-<p>Set the resize policy. The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<p>Set the resize policy.</p>
+<p>To set a policy that decides 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 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 which case only the image object is scaled, not the underlying GL surface.</p>
</li>
<li>
-<p>Set the GLView rendering policy:</p>
+<p>Set the GLView rendering policy.</p>
+<p>To always redraw the GLView component during the rendering loop:</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>The rendering policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), in which case the GLView component is redrawn only when it is visible.</p>
</li>
<li>
-<p>Register the callbacks:</p>
-
+<p>Register callbacks for managing changes in the GLView component state:</p>
+<ul>
+<li>The initialization callback is called at the GLView component creation.</li>
+<li>The deletion callback is called when the GLView component is deleted.</li>
+<li>The resize callback is called during the rendering loop when the GLView component is resized.</li>
+<li>The render callback is called when the GLView component must be redrawn.</li>
+</ul>
<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 <span style="font-family: Courier New,Courier,monospace">init</span> 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 <span style="font-family: Courier New,Courier,monospace">del</span> 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>
</li>
-</ol>
+</ul>
-<h2 id="callback">Using GLView Callbacks</h2>
+<h2 id="callback">Using the GLView Callbacks</h2>
-<p>The GLView component emits the following signals:</p>
+<p>To receive notifications about the GLView events, listen to 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">focused</span>: The GLView component is focused.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
</ul>
-<p>To register a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(glview, "focused", focused_cb, data);
}
-// Callback function for the "focused" signal
-// This callback is called when the GLView is focused
+// Callback for the "focused" signal
+// Called when the GLView is focused
void
focused_cb(void *data, Evas_Object *obj, void *event_info)
{
<p>The hoversel component is a button that pops up a list of items (automatically choosing the direction to display).</p>
-<p>The hoversel component inherits from the button component, which means that all button functions can be used on the hoversel component.</p>
+<p>The hoversel component inherits from the button component, which means that button functions can be used on the hoversel component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Hoversel.html">Hoversel</a> API.</p>
<h2 id="add">Adding a Hoversel Component</h2>
-<p>To create a hoversel component, use the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_add()</span> function. When activated, the component automatically chooses the direction in which to display itself in its parent object's view.</p>
+<p>To create a hoversel component, use the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *hoversel, *parent;
// Create a hoversel
hoversel = elm_hoversel_add(parent);
</pre>
+<p>When activated, the hoversel automatically selects the direction in which to display itself in its parent object's view.</p>
<h2 id="configure">Configuring the Hoversel</h2>
<p>To configure the hoversel:</p>
<ul><li>
-<p>In Tizen 2.4, the horizontal mode is not provided for hoversel. When the hoversel is added, it must be set to the vertical mode with the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_horizontal_set()</span> function:</p>
+<p>Set the hovelsel orientation using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_horizontal_set()</span> function.</p>
+<p>In Tizen 2.4, the horizontal mode is not provided for the hoversel. You must set the hoversel to the vertical mode:</p>
<pre class="prettyprint">
elm_hoversel_horizontal_set(hoversel, EINA_FALSE);
</pre></li>
-<li><p>The hoversel creates a hover component and puts a list of items in the hover when it is activated. The hover parent can be set by using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_parent_set()</span> function, and it determines the area where the item list can be shown. The hover parent does not need to be the same as the hoversel parent.</p>
+<li><p>Set the hover parent with the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_parent_set()</span> function.</p>
+<p>The hoversel creates a hover component and puts a list of items in the hover when it is activated. The hover parent determines the area where the item list can be shown. The hover parent does not need to be the same as the hoversel parent.</p>
<pre class="prettyprint">
Evas_Object *hoversel, *parent, *win;
+
hoversel = elm_hoversel_add(parent);
elm_hoversel_hover_parent_set(hoversel, win);
</pre></li>
<li>
-<p>The hoversel can be activated by a click or calling the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_begin()</span> function. To deactivate, click an item, click outside the item list, or call the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_end()</span> function.</p>
+<p>Activate the hoversel.</p>
+<p>The hoversel can be activated by a click or calling the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_begin()</span> function. To deactivate it, click an item, click outside the item list, or call the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_end()</span> function.</p>
<pre class="prettyprint">
elm_hoversel_hover_begin(hoversel);
elm_hoversel_hover_end(hoversel);
</pre></li>
-<li><p>You can retrieve the activation state of the hoversel (as a Boolean value) using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_expanded_get()</span> function:</p>
+<li><p>Retrieve the hoversel activation state (as a Boolean value) using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_expanded_get()</span> function:</p>
<pre class="prettyprint">
Eina_Bool expanded;
expanded = elm_hoversel_expanded_get(hoversel);
<p>To manage items:</p>
-<ol><li>To add an item with a <span style="font-family: Courier New,Courier,monospace">"test"</span> label and the <span style="font-family: Courier New,Courier,monospace">_hoversel_item_cb</span> clicked callback, use the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_item_add()</span> function. The clicked signal is related to an individual item, not the entire hoversel.
+<ol><li>Add an item using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_item_add()</span> function.
+<p>To add an item with a "test" label and the <span style="font-family: Courier New,Courier,monospace">_hoversel_item_cb</span> clicked callback: </p>
<pre class="prettyprint">
Elm_Object_Item *it;
ELM_ICON_NONE, // icon type
_hoversel_item_cb, // Clicked callback for the item
NULL); // Callback data
-</pre></li>
+</pre>
+<p>The signal for the clicked callback is related to an individual item, not the entire hoversel.</p></li>
<li>
-<p>Retrieve the handles for the added items with the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_items_get()</span> function. It returns a list of <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> items.</p>
+<p>Retrieve the handles for the added items using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_items_get()</span> function.</p>
+<p>The function returns a list of <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> items.</p>
<pre class="prettyprint">
Eina_List *items;
items = elm_hoversel_items_get(hoversel);
</pre></li>
-<li><p>To change the item label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function. The following example shows how to change the item label to "New Label".</p>
+<li><p>Change the item label using the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function.</p>
+<p>To change the item label to "New Label":</p>
<pre class="prettyprint">
Elm_Object_Item *it = elm_hoversel_item_add(hoversel, "test", NULL, ELM_ICON_NONE, NULL, NULL);
elm_object_item_part_text_set(it, "default", "New label");
</pre></li>
-<li><p>All items can be deleted together with the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_clear()</span> function:</p>
+<li><p>Delete all items together with the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_clear()</span> function:</p>
<pre class="prettyprint">
elm_hoversel_clear(hoversel);
</pre></li></ol>
<h2 id="callback">Using the Hoversel Callbacks</h2>
-<p>The hoversel component emits the following signals:</p>
+<p>To receive notifications about the hoversel events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: When the hoversel is clicked.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selected</span>: When a hoversel item is selected.</li>
- <li><span style="font-family: Courier New,Courier,monospace">dismissed</span>: When the hover is dismissed (by selecting an item or clicking the hover).</li>
- <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: When the hoversel is activated by clicking the hoversel or by a function.</li>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: When the program language is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The hoversel is clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The hoversel item is selected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">dismissed</span>: The hover is dismissed (by selecting an item or clicking the hover).
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The hoversel is activated by clicking the hoversel or by a function.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</li>
</ul>
-<p>For example, when the hoversel is deactivated by selecting an item or clicking the hover, the hover becomes dismissed and the hoversel emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal. 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>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(hoversel, "dismissed", dismissed_cb, data);
}
-// Callback function for the "dismissed" signal
-// This callback is called when the hoversel is dismissed
+// Callback for the "dismissed" signal
+// Called when the hoversel is dismissed
void
dismissed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+ <li><a href="#image">Changing the Image File</a></li>
+ <li><a href="#callback">Using the Icon Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>This feature is supported in mobile applications only.</p>
-<p>An icon component is used to display standard icon images, such as "delete", "home", and "apps". The icon component inherits from the image component, and it is used to display images in an icon context.</p>
-<p>In the following cases it is better to use an icon instead of an image:</p>
+<p>The icon component is used to display standard icon images, such as "delete", "home", and "apps", in an icon context.</p>
+
+<p>The icon component inherits from the image component, which means that image functions can be used on the icon component.</p>
+
+<p>In the following cases, use an icon instead of an image:</p>
<ul>
<li>You need a thumbnail version of an original image.</li>
<li>You need freedesktop.org-provided icon images.</li>
<h2 id="add">Adding an Icon Component</h2>
-<p>To create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon:</p>
+<p>To create an icon component, use the <span style="font-family: Courier New,Courier,monospace">elm_icon_add()</span> function.</p>
+<p>To set the icon as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon, use the <span style="font-family: Courier New,Courier,monospace">elm_icon_standard_set()</span> function.</p>
<pre class="prettyprint">
Evas_Object *icon, *parent;
+
icon = elm_icon_add(parent);
elm_icon_standard_set(icon, "Home");
</pre>
-<h2 id="image">Changing Image File</h2>
+<h2 id="image">Changing the Image File</h2>
<p>To change the image file:</p>
<ul>
<li>
-<p>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>
+<p>You can use an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
</pre>
</li>
<li>
-<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+<p>You can generate and use a thumbnail:</p>
<pre class="prettyprint">
elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> 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. The Ethumb library support is required for the thumbnail usage.</p>
</li>
</ul>
-<h2 id="callback">Using Icon Callbacks</h2>
+<h2 id="callback">Using the Icon Callbacks</h2>
-<p>The icon component emits the following signals:</p>
+<p>To receive notifications about the icon events, listen to the following signals:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function is completed with success.</li>
<li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function 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>
+<p>In both cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
<table class="note">
<tbody>
<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>
+ <li><a href="#image">Changing the Image File</a></li>
+ <li><a href="#callback">Using the Icon Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The icon component is used to display standard icon images, such as "delete", "home", and "apps", in an icon context.</p>
+
+<p>The icon component inherits from the image component, which means that image functions can be used on the icon component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Icon.html">Icon</a> API.</p>
<h2 id="add">Adding an Icon Component</h2>
-<p>To create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon:</p>
+<p>To create an icon component, use the <span style="font-family: Courier New,Courier,monospace">elm_icon_add()</span> function.</p>
+<p>To set the icon as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon, use the <span style="font-family: Courier New,Courier,monospace">elm_icon_standard_set()</span> function.</p>
<pre class="prettyprint">
Evas_Object *icon, *parent;
+
icon = elm_icon_add(parent);
elm_icon_standard_set(icon, "Home");
</pre>
-<h2 id="change">Changing Image File</h2>
+<h2 id="image">Changing the Image File</h2>
<p>To change the image file:</p>
<ul>
<li>
-<p>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>
+<p>You can use an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
</pre>
</li>
<li>
-<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+<p>You can generate and use a thumbnail:</p>
<pre class="prettyprint">
elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> 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. The Ethumb library support is required for the thumbnail usage.</p>
</li>
</ul>
-<h2 id="callback">Using Icon Callbacks</h2>
+<h2 id="callback">Using the Icon Callbacks</h2>
-<p>The icon component emits the following signals:</p>
+<p>To receive notifications about the icon events, listen to the following signals:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function is completed with success.</li>
<li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function 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>
+<p>In both cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
<table class="note">
<tbody>
<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>
+ <li><a href="#configure">Configuring the Image</a></li>
+ <li><a href="#callback">Using the Image Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<pre class="prettyprint">
Evas_Object *image, *parent;
+
image = elm_image_add(parent);
</pre>
-<h2 id="configure">Configuring the Image Component</h2>
+<h2 id="configure">Configuring the Image</h2>
<p>To configure the image component:</p>
<ul>
elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
</pre>
</li>
+<li>
+<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In the above configuration, a part of the image can go outside the object. If the <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span> function 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>
+</li>
<li>
<p>Use the smooth scaling algorithm to provide a better quality image. It is slower than the default algorithm.</p>
<pre class="prettyprint">
</pre>
</li>
<li>
-<p>Preload 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.</p>
+<p>Preload images without blocking the user interface. This preserves the reactivity of the user experience, as the image is loaded in a thread.</p>
+<p>To disable preloading:</p>
<pre class="prettyprint">
elm_image_preload_disabled_set(image, EINA_TRUE);
</pre>
</li>
<li>
-<p>Rotate or flip the image. In the following example, 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>
+<p>Rotate or flip the image.</p>
+<p>The following orientation changes 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>
+ <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>
-</li>
-<li>
-<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:</p>
<pre class="prettyprint">
-// Tell the image to keep original aspect ratio
-elm_image_aspect_fixed_set(image, EINA_TRUE);
-// Then let the image fill the entire object
-elm_image_fill_outside_set(image, EINA_TRUE);
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
</pre>
-
-<p>In this configuration, part of the image can go outside the object. If the <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span> function 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>
</li>
-<li>
-<p>Execute an animation with the <span style="font-family: Courier New,Courier,monospace">elm_image_animated_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_image_animated_play_set()</span> functions. The flag must be set to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on both functions.</p>
-<pre class="prettyprint">
-// Check whether an image object supports animation
-elm_image_animated_available_get(image);
-// Set whether an image object is to animate itself
-// To play or stop is decided by elm_image_animated_play_set()
-elm_image_animated_set(image, EINA_TRUE);
+<li>
+<p>Execute an animation:</p>
-// Control to animate. EINA_TRUE is for being animated, EINA_FALSE otherwise
-elm_image_animated_play_set(image, EINA_TRUE);
-</pre>
+<ul><li>To check whether the image supports animation, use the <span style="font-family: Courier New,Courier,monospace">elm_image_animated_available_get()</span> function.</li>
+<li>To define whether the image must animate itself, use the <span style="font-family: Courier New,Courier,monospace">elm_image_animated_set()</span> function. To enable the animation, use the <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> flag.</li>
+<li>To control the animation, use the <span style="font-family: Courier New,Courier,monospace">elm_image_animated_play_set()</span> function. To play the animation, use the <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> flag, and to stop the animation, use the <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> flag.</li>
+</ul>
-<p>The following example shows how to use the functions together:</p>
<pre class="prettyprint">
if (elm_image_animated_available_get(image))
{
</li>
</ul>
-<h2 id="callback">Using Image Callbacks</h2>
+<h2 id="callback">Using the Image Callbacks</h2>
-<p>The image component emits the following signals:</p>
+<p>To receive notifications about the image events, listen to 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 parameter 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>
+ <li><span style="font-family: Courier New,Courier,monospace">drop</span>: An image typed object is dropped onto the object in question. <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the path to that image file.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image is clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
</ul>
-<p>To register a callback when a user clicks on the image:</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when the image is clicked
+// Callback for the "clicked" signal
+// Called when the user clicks on the image
void
clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+ <li><a href="#configure">Configuring the Image</a></li>
+ <li><a href="#callback">Using the Image Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<pre class="prettyprint">
Evas_Object *image, *parent;
+
image = elm_image_add(parent);
</pre>
-<h2 id="configure">Configuring the Image Component</h2>
+<h2 id="configure">Configuring the Image</h2>
<p>To configure the image component:</p>
<ul>
elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
</pre>
</li>
+<li>
+<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In the above configuration, a part of the image can go outside the object. If the <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span> function 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>
+</li>
<li>
<p>Use the smooth scaling algorithm to provide a better quality image. It is slower than the default algorithm.</p>
<pre class="prettyprint">
</pre>
</li>
<li>
-<p>Preload 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.</p>
+<p>Preload images without blocking the user interface. This preserves the reactivity of the user experience, as the image is loaded in a thread.</p>
+<p>To disable preloading:</p>
<pre class="prettyprint">
elm_image_preload_disabled_set(image, EINA_TRUE);
</pre>
</li>
<li>
-<p>Rotate or flip the image. In the following example, 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>
+<p>Rotate or flip the image.</p>
+<p>The following orientation changes 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>
+ <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>
-</li>
-<li>
-<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:</p>
<pre class="prettyprint">
-// Tell the image to keep original aspect ratio
-elm_image_aspect_fixed_set(image, EINA_TRUE);
-// Then let the image fill the entire object
-elm_image_fill_outside_set(image, EINA_TRUE);
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
</pre>
-
-<p>In this configuration, part of the image can go outside the object. If the <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span> function 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>
</li>
+
</ul>
-<h2 id="callback">Using Image Callbacks</h2>
+<h2 id="callback">Using the Image Callbacks</h2>
-<p>The image component emits the following signals:</p>
+<p>To receive notifications about the image events, listen to 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 parameter 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>
+ <li><span style="font-family: Courier New,Courier,monospace">drop</span>: An image typed object is dropped onto the object in question. <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the path to that image file.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image is clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
</ul>
-<p>To register a callback when a user clicks on the image:</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when the image is clicked
+// Callback for the "clicked" signal
+// Called when the user clicks on the image
void
clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#add">Adding an Index Component</a></li>
- <li><a href="#modify">Modifying the Index Styles</a></li>
+ <li><a href="#modify">Using the Index Styles</a></li>
<li><a href="#configure">Configuring the Index</a></li>
- <li><a href="#items">Adding Items</a></li>
+ <li><a href="#items">Adding Index Items</a></li>
<li><a href="#sort">Sorting Index Items</a></li>
<li><a href="#callback">Using the Index Callbacks</a></li>
</ul>
<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.</p>
-<p>There are 2 styles of index components:</p>
+<p>The index component gives you an index for fast access to a group of other UI items. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas.</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">"fastscroll"</span> is the default style. It is a one-finger-wide area on the right side of the index component's container. Generally, the default style is used together with lists, generic lists, or generic grids.</li>
-<li><span style="font-family: Courier New,Courier,monospace">"pagecontrol"</span> is a one-finger-high area on the bottom side of the index component container. Generally, the pagecontrol style is used together with a layout, and images which are located in a scrollable object.</li></ul>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Index.html">Index</a> API.</p>
-<p class="figure">Figure: Index component (fastscroll on right and pagecontrol on left)</p>
+<p class="figure">Figure: Index component (fastscroll style on right and pagecontrol style on left)</p>
<p align="center"> <img alt="Index (fastscroll) component" src="../../images/index.png" /> <img alt="Index (pagecontrol) component" src="../../images/index2.png" /> </p>
<p class="figure">Figure: Index hierarchy</p>
index = elm_index_add(parent);
</pre>
-<h2 id="modify" name="modify">Modifying the Index Styles</h2>
+<h2 id="modify" name="modify">Using the Index Styles</h2>
-<p>The index component style can be set with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function to <span style="font-family: Courier New,Courier,monospace">default</span> (fastscroll) or <span style="font-family: Courier New,Courier,monospace">pagecontrol</span>.</p>
+<p>The index component has 2 styles:</p>
-<p>To set the pagecontrol style:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">fastscroll</span> is the default style. It is a one-finger-wide area on the right side of the index component's container. Generally, the default style is used together with lists, generic lists, or generic grids.</li>
+<li><span style="font-family: Courier New,Courier,monospace">pagecontrol</span> is a one-finger-high area on the bottom side of the index component container. Generally, the pagecontrol style is used together with a layout, and images which are located in a scrollable object.</li></ul>
+
+<p>To set the style, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function:</p>
<pre class="prettyprint">
elm_object_style_set(index, "pagecontrol");
</pre>
<p>To configure the index component:</p>
<ul>
<li>
-<p>Set the index orientation with the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set()</span> function. For the default style, both orientations are supported, but for the pagecontrol style, only horizontal mode is available.</p>
+<p>Set the index orientation with the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set()</span> function.</p>
+<p>For the default style, both orientations are supported, but for the pagecontrol style, only horizontal mode is available.</p>
<pre class="prettyprint">
elm_index_horizontal_set(index, EINA_TRUE);
</pre>
</li>
-<li>Disable auto hiding.
-<p>The auto hide feature is enabled by default. Auto hide can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_index_autohide_disabled_set()</span> function.</p>
+<li>Disable auto hiding with the <span style="font-family: Courier New,Courier,monospace">elm_index_autohide_disabled_set()</span> function.
+<p>The auto hide feature is enabled by default.</p>
<pre class="prettyprint">
elm_index_autohide_disabled_set(index, EINA_TRUE);
</pre>
</li>
</ul>
-<h2 id="items">Adding Items</h2>
+<h2 id="items">Adding Index Items</h2>
-<p>To add items:</p>
+<p>To add index items:</p>
<ol>
<li>
-<p>Add the list item object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when this item is selected:</p>
+<p>Add a list item object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when this item is selected:</p>
<pre class="prettyprint">
Elm_Object_Item *list_item1, *list_item2;
elm_index_item_append(index, "A", it_select_cb, list_item1);
</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_index_item_append()</span> function appends the indexes to the existing ones. It is also possible to prepend index items with the <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span> function.</p>
</li>
<li>
<p>Define the smart callback:</p>
<pre class="prettyprint">
-// Callback function called when the list_item1 object is selected
+// Called when the list_item1 object is selected
void
it_select_cb(void *data, Evas_Object *obj, void *event_info)
{
</li>
</ol>
-<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with the <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span> function.</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 can insert index items using a sorting function. Indexes can be sorted, for example, in an 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>
+<p>Define 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
{
int result;
- // Code that does the item comparison is written here
+ // Code that does the item comparison is here
return result;
}
</pre>
-<p>The following 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>
+<p>To add a new item at the <span style="font-family: Courier New,Courier,monospace">B</span> index using the compare function to sort the indexes:</p>
<pre class="prettyprint">
elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp, NULL);
<h2 id="callback">Using the Index Callbacks</h2>
-<p>The index component emits the following signals:</p>
+<p>To receive notifications about the index events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
- <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The mouse button is released and an item is selected. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item by releasing the mouse button.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></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.</p>
-<p>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):</p>
+<p>Register and define the associated callback to perform appropriate actions. For example, when the <span style="font-family: Courier New,Courier,monospace">selected</span> signal occurs, show a given area or child object depending on the selected index item:</p>
<pre class="prettyprint">
static void
_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
// Code that does the desired action
}
-</pre>
-<p>Register the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal:</p>
-<pre class="prettyprint">
evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
</pre>
<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>
+ <li><a href="#items">Adding Index Items</a></li>
+ <li><a href="#callback">Using the Index Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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's container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
+<p>The index component gives you an index for fast access to a group of other UI items. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas.</p>
+
+<p>In the default theme, the index component is a one-finger-wide area on the right side of the index component's container. Generally, it is used together with lists, generic lists, or generic grids.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Index.html">Index</a> API.</p>
index = elm_index_add(parent);
</pre>
-<h2 id="items">Adding Items</h2>
+<h2 id="items">Adding Index Items</h2>
-<p>To add items:</p>
+<p>To add index items:</p>
<ol>
<li>
-<p>Add the list item object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when this item is selected:</p>
+<p>Add a list item object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when this item is selected:</p>
<pre class="prettyprint">
Elm_Object_Item *list_item1, *list_item2;
elm_index_item_append(index, "A", it_select_cb, list_item1);
</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_index_item_append()</span> function appends the indexes to the existing ones. It is also possible to prepend index items with the <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span> function.</p>
</li>
<li>
<p>Add item objects, calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when the item is selected:</p>
<li>
<p>Define the smart callback:</p>
<pre class="prettyprint">
-// Callback function called when the list_item1 object is selected
+// Called when the list_item1 object is selected
void
it_select_cb(void *data, Evas_Object *obj, void *event_info)
{
</pre>
</li>
</ol>
-<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with the <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span> function.</p>
-<h2 id="callback">Using Index Callbacks</h2>
+<h2 id="callback">Using the Index Callbacks</h2>
-<p>The index component emits the following signals:</p>
+<p>To receive notifications about the index events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
- <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The mouse button is released and an item is selected. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item by releasing the mouse button.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></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.</p>
-
-<p>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):</p>
+<p>Register and define the associated callback to perform appropriate actions. For example, when the <span style="font-family: Courier New,Courier,monospace">selected</span> signal occurs, show a given area or child object depending on the selected index item:</p>
<pre class="prettyprint">
static void
_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
// Code that does the desired action
}
-</pre>
-<p>Register the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal:</p>
-<pre class="prettyprint">
evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
</pre>
<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>This feature is supported in mobile applications only.</p>
-<p>The label component displays text with a simple html-like markup.</p>
+<p>The label component displays text with a simple HTML-like markup.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Label.html">Label</a> API.</p>
<h2 id="add">Adding a Label Component</h2>
-<p>To add a label and set the text in it:</p>
+<p>To create a label, use the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function. You can set the label text with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
<pre class="prettyprint">
Evas_Object *label = elm_label_add(win);
elm_object_text_set(label, "Some long text for our label, that is not so long");
</pre>
-<h2 id="styles">Using the Label Styles</h2>
+<h2 id="configure">Configuring the Label</h2>
-<p>Label displays the text with the following predefined styles:</p>
+<p>To configure the label:</p>
+<ol>
+<li>
+<p>Modify the style with which the label component displays text.</p>
+<p>The following styles are available:</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_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>In the following example, the style is set to <span style="font-family: Courier New,Courier,monospace">slide_long</span>.</p>
-
<pre class="prettyprint">
-elm_object_style_set(label, "slide_long");
+elm_object_style_set(label, "slide_bounce");
</pre>
-
-<h2 id="configure">Configuring the Label</h2>
-
-<p>To configure the label:</p>
-<ol>
+</li>
<li>
-<p>Set the duration of the animation and the slide mode:</p>
+<p>If you use a slide-type style for the text, you can also set the slide mode and animation duration:</p>
<pre class="prettyprint">
elm_label_slide_duration_set(label, 3);
elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
</pre>
</li>
-<li>
-<p>Modify the style:</p>
-<pre class="prettyprint">
-elm_object_style_set(label, "slide_bounce");
-</pre>
-</li>
+
</ol>
<h2 id="callback">Using the Label Callbacks</h2>
-<p>The label component emits the following signals:</p>
+<p>To receive notifications about the label events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program's language changes.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</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>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span>: The anchor is pressed by mouse down.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span>: The anchor is released by mouse up.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
</ul>
-<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
}
-// Callback function for the "slide,end" signal
-// This callback is called when the label slide reaches the end
+// Callback for the "slide,end" signal
+// Called when the label slide reaches the end
void
slide_end_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>This feature is supported in wearable applications only.</p>
-<p>The label component displays text with a simple html-like markup.</p>
+<p>The label component displays text with a simple HTML-like markup.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Label.html">Label</a> API.</p>
<h2 id="add">Adding a Label Component</h2>
-<p>To add a label and set the text in it:</p>
+<p>To create a label, use the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function. You can set the label text with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
<pre class="prettyprint">
Evas_Object *label = elm_label_add(win);
elm_object_text_set(label, "Some long text for our label, that is not so long");
</pre>
-<h2 id="styles">Using the Label Styles</h2>
+<h2 id="configure">Configuring the Label</h2>
-<p>Label displays the text with the following predefined styles:</p>
+<p>To configure the label:</p>
+<ol>
+<li>
+<p>Modify the style with which the label component displays text.</p>
+<p>The following styles are available:</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_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_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>In the following example, the style is set to <span style="font-family: Courier New,Courier,monospace">slide_roll</span>.</p>
-
<pre class="prettyprint">
elm_object_style_set(label, "slide_roll");
</pre>
-
-<h2 id="configure">Configuring the Label</h2>
-
-<p>To configure the label:</p>
-<ol>
+</li>
<li>
-<p>Set the duration of the animation and the slide mode:</p>
+<p>If you use a slide-type style for the text, you can also set the slide mode and animation duration:</p>
<pre class="prettyprint">
elm_label_slide_duration_set(label, 3);
elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
</pre>
</li>
-<li>
-<p>Modify the style:</p>
-<pre class="prettyprint">
-elm_object_style_set(label, "slide_bounce");
-</pre>
-</li>
+
</ol>
<h2 id="callback">Using the Label Callbacks</h2>
-<p>The label component emits the following signals:</p>
+<p>To receive notifications about the label events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program's language changes.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</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>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span>: The anchor is pressed by mouse down.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span>: The anchor is released by mouse up.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
</ul>
-<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
}
-// Callback function for the "slide,end" signal
-// This callback is called when the label slide reaches the end
+// Callback for the "slide,end" signal
+// Called when the label slide reaches the end
void
slide_end_cb(void *data, Evas_Object *obj, void *event_info)
{
<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">Using List Item Operations</a></li>
- <li><a href="#callback">Using List Callbacks</a></li>
+ <li><a href="#add_item">Adding List Items</a></li>
+ <li><a href="#change">Modifying List Items</a></li>
+ <li><a href="#use">Accessing and Selecting List Items</a></li>
+ <li><a href="#callback">Using the List Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<p>This feature is supported in mobile applications only.</p>
- <p>The list is a very simple UI component. It is not to be used to manage many items. For longer lists, use the <a href="component_genlist_mn.htm">Genlist</a>.</p>
-
- <p>The list items can contain a piece of 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>The list is a very simple UI component used to manage a limited number of items. For lists with a lot of items, use the <a href="component_genlist_mn.htm">Genlist</a>.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__List.html">List</a> API.</p>
list = elm_list_add(parent);
</pre>
-<h2 id="use">Using the List</h2>
+<h2 id="add_item">Adding List Items</h2>
-<p>To use the list:</p>
-<ul>
-<li>Use scroller functions:
-<p>This UI component implements the scrollable interface, which means that the scroller component functions can be used on it. The following example shows how to change the bounce property of the scroller or the scrolling policy.</p>
-<pre class="prettyprint">
-Evas_Object *list;
+ <p>A list item can contain a piece of text and 2 contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). To set the individual elements of an item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_XXX()</span> functions.</p>
-// 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>
-</li>
-<li>Select items:
-<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>
-</li>
-</ul>
-
-<h2 id="add_item">Adding Items to the List</h2>
-
- <p>Items are added with the <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> functions. In the following example, 10 items with text and 1 icon are added. The last 2 parameters are the callback function when the created item is clicked and the data passed to the callback function.</p>
+<p>To add an item to the list, use the <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> function. In the following example, 10 items with text and 1 icon are added. The last 2 parameters of the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> function are the callback function when the created item is selected 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
+// Called when the list item is selected
static void
_selected_item_cb(void *data, Evas_Object *obj, void *event_info)
{
ic = elm_icon_add(win);
// Set the file to the icon file
elm_image_file_set(ic, "path/to/file", NULL);
- // Add item to the list
+ // Add the item to the list
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>To change the state of an item, use all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains 2 instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth parameters 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 the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, and 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> functions. The label of the item is changed using the <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set()</span> function.</p>
+<h2 id="change">Modifying List Items</h2>
+
+<p>To modify the list item elements, use the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> functions:</p>
+
+<ul>
+<li>To modify the item label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set()</span> function.</li>
+<li>To modify the 2 contents, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function, referencing the first object as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme and the second one as the <span style="font-family: Courier New,Courier,monospace">end</span> object.
+<p>Each content is an <span style="font-family: Courier New,Courier,monospace">evas_object</span> instance, and they are defined as the third and the fourth parameters when you append or prepend the item in the list with the <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> function.</p></li></ul>
<pre class="prettyprint">
Evas_Object *list;
// Change the label
elm_object_item_text_set(it, "I've been selected !");
</pre>
-
-<h2 id="retrieve">Retrieving Selected Items</h2>
-<p>The list of the currently selected items is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span> function. If the multiselect mode is false, you can retrieve the only selected item with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span> function. For example, this is how to unselect all previously selected items.</p>
+<h2 id="use">Accessing and Selecting List Items</h2>
+
+<p>To access and select list items:</p>
+<ul>
+<li>Configuring the scroller:
+<p>The list component implements the scrollable interface, which means that the scroller component functions can be used to ease the management of longer lists. 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_TRUE, EINA_TRUE);
+</pre>
+</li>
+<li>Enabling the multi-selection mode:
+<p>To enable multiple items to be selected at the same time, enable the multi-selection mode with the <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function. Each time an item is clicked, its state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Enable multi-selection mode
+elm_list_multi_select_set(list, EINA_TRUE);
+</pre>
+</li>
+
+<li>Selecting items:
+<p>To find out whether an item is selected, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get()</span> function. 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>To set an item as <span style="font-family: Courier New,Courier,monospace">selected</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_set()</span> function.</p>
+</li>
+
+<li>Retrieving selected items:
+<p>To retrieve the list of the currently selected items, use the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span> function.</p>
+<p>If the multi-selection mode is disabled, only 1 item can be selected, and you can retrieve it with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span> function.</p>
+
+<p>To retrieve all selected items and set their state to <span style="font-family: Courier New,Courier,monospace">unselected</span>:</p>
<pre class="prettyprint">
Evas_Object *list; Eina_List *l;
selected_items = elm_list_selected_items_get(list);
EINA_LIST_FOREACH(selected_items, l, it)
elm_list_item_selected_set(it, EINA_FALSE);
-</pre>
-
-<h2 id="operation">Using List Item Operations</h2>
-
-<p>To find out if an item is selected, call the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get()</span> function. 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>
+</pre></li>
-<p>Elementary list provides 2 functions for sliding a list to a specific item. The <span style="font-family: Courier New,Courier,monospace">elm_list_item_show()</span> function shows the item passed as a parameter, whereas the <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in()</span> function shows the item, but only after animating the slide.</p>
-
-<p>You can go to the item immediately preceding a specific item with the <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev()</span> function, or to the one immediately following a specific item with the <span style="font-family: Courier New,Courier,monospace">elm_list_item_next()</span> function.</p>
+<li>Moving within the list:
+<p>The list component provides various functions for moving within the list and sliding the list to a specific item:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_show()</span> function shows the item passed as a parameter.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in()</span> function shows the item passed as a parameter, after animating the slide.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev()</span> function goes to the item immediately preceding a specific item.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_next()</span> function goes to the item immediately following a specific item.</li></ul>
-<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>
+<p>To retrieve the currently selected item and unselect it, and then select the next item and bring it to the screen:</p>
<pre class="prettyprint">
Evas_Object *list;
next = elm_list_item_next(current);
elm_list_item_selected_set(next, EINA_TRUE);
elm_list_item_bring_in(next);
-</pre>
+</pre></li></ul>
-<h2 id="callback">Using List Callbacks</h2>
+<h2 id="callback">Using the List Callbacks</h2>
- <p>The list component emits the following signals: </p>
+ <p>To receive notifications about the list events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar). 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 item is double-clicked. 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 item is selected. 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 item is unselected. 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 item is long-pressed. 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">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the activated item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the double-clicked item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the selected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unselected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is long-pressed.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the long-pressed item.</p></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>: An item on the list is highlighted. 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>: An item in the list is unhighlighted. 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">highlighted</span>: An item on the list is highlighted.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the highlighted item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: An item in the list is unhighlighted.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unhighlighted item.</p></li>
</ul>
-<p>The following example shows how to register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal. 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 following 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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
+// Callback for the "clicked,double" signal
+// Called when the button is double-clicked by the user
void
-double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
elm_Object_Item *it = event_info;
- elm_list_selected_item_set(it, EINA_FALSE);
+ elm_list_selected_item_set(it, EINA_FALSE);
}
</pre>
<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>
+ <li><a href="#add_item">Adding List Items</a></li>
+ <li><a href="#change">Modifying List Items</a></li>
+ <li><a href="#use">Accessing and Selecting List Items</a></li>
+ <li><a href="#callback">Using the List Callbacks</a></li>
+
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>This feature is supported in wearable applications only.</p>
- <p>The list is a very simple UI component. It is not to be used to manage many items. For longer lists, use the <a href="component_genlist_mn.htm">Genlist</a>.</p>
-
- <p>The list items can contain a piece of 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>The list is a very simple UI component used to manage a limited number of items. For lists with a lot of items, use the <a href="component_genlist_wn.htm">Genlist</a>.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__List.html">List</a> API.</p>
list = elm_list_add(parent);
</pre>
-<h2 id="use">Using the List</h2>
-
-<p>To use the list:</p>
-<ul>
-<li>Use scroller functions:
-<p>This UI component implements the scrollable interface, which means that the scroller component functions can be used on it. The following example shows how 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>
-</li>
-<li>Select items:
-<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>
-</li>
-</ul>
+<h2 id="add_item">Adding List Items</h2>
-<h2 id="items">Adding Items to the List</h2>
+ <p>A list item can contain a piece of text and 2 contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). To set the individual elements of an item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_XXX()</span> functions.</p>
- <p>Items are added with the <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> functions. In the following example, 10 items with text and 1 icon are added. The last 2 parameters are the callback function when the created item is clicked and the data passed to the callback function.</p>
+<p>To add an item to the list, use the <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> function. In the following example, 10 items with text and 1 icon are added. The last 2 parameters of the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> function are the callback function when the created item is selected 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
+// Called when the list item is selected
static void
_selected_item_cb(void *data, Evas_Object *obj, void *event_info)
{
ic = elm_icon_add(win);
// Set the file to the icon file
elm_image_file_set(ic, "path/to/file", NULL);
- // Add item to the list
+ // Add the item to the list
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>To change the state of an item, use all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains 2 instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth parameters 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 the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, and 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> functions. The label of the item is changed using the <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set()</span> function.</p>
+<h2 id="change">Modifying List Items</h2>
+
+<p>To modify the list item elements, use the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> functions:</p>
+
+<ul>
+<li>To modify the item label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set()</span> function.</li>
+<li>To modify the 2 contents, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function, referencing the first object as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme and the second one as the <span style="font-family: Courier New,Courier,monospace">end</span> object.
+<p>Each content is an <span style="font-family: Courier New,Courier,monospace">evas_object</span> instance, and they are defined as the third and the fourth parameters when you append or prepend the item in the list with the <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> function.</p></li></ul>
<pre class="prettyprint">
Evas_Object *list;
// Change the label
elm_object_item_text_set(it, "I've been selected !");
</pre>
-
-<h2 id="retrieve">Retrieving Selected Items</h2>
-<p>The list of the currently selected items is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span> function. If the multiselect mode is false, you can retrieve the only selected item with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span> function. For example, this is how to unselect all previously selected items.</p>
+<h2 id="use">Accessing and Selecting List Items</h2>
+
+<p>To access and select list items:</p>
+<ul>
+<li>Configuring the scroller:
+<p>The list component implements the scrollable interface, which means that the scroller component functions can be used to ease the management of longer lists. 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 vertical limits
+elm_scroller_bounce_set(list, EINA_FALSE, EINA_TRUE);
+</pre>
+</li>
+<li>Enabling the multi-selection mode:
+<p>To enable multiple items to be selected at the same time, enable the multi-selection mode with the <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function. Each time an item is clicked, its state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Enable multi-selection mode
+elm_list_multi_select_set(list, EINA_TRUE);
+</pre>
+</li>
+
+<li>Selecting items:
+<p>To find out whether an item is selected, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get()</span> function. 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>To set an item as <span style="font-family: Courier New,Courier,monospace">selected</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_set()</span> function.</p>
+</li>
+
+<li>Retrieving selected items:
+<p>To retrieve the list of the currently selected items, use the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span> function.</p>
+<p>If the multi-selection mode is disabled, only 1 item can be selected, and you can retrieve it with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span> function.</p>
+
+<p>To retrieve all selected items and set their state to <span style="font-family: Courier New,Courier,monospace">unselected</span>:</p>
<pre class="prettyprint">
Evas_Object *list; Eina_List *l;
selected_items = elm_list_selected_items_get(list);
EINA_LIST_FOREACH(selected_items, l, it)
elm_list_item_selected_set(it, EINA_FALSE);
-</pre>
-
-<h2 id="operation">Using List Item Operations</h2>
-
-<p>To find out if an item is selected, call the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get()</span> function. 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>
+</pre></li>
-<p>Elementary list provides 2 functions for sliding a list to a specific item. The <span style="font-family: Courier New,Courier,monospace">elm_list_item_show()</span> function shows the item passed as a parameter, whereas the <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in()</span> function shows the item, but only after animating the slide.</p>
-
-<p>You can go to the item immediately preceding a specific item with the <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev()</span> function, or to the one immediately following a specific item with the <span style="font-family: Courier New,Courier,monospace">elm_list_item_next()</span> function.</p>
+<li>Moving within the list:
+<p>The list component provides various functions for moving within the list and sliding the list to a specific item:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_show()</span> function shows the item passed as a parameter.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in()</span> function shows the item passed as a parameter, after animating the slide.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev()</span> function goes to the item immediately preceding a specific item.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_next()</span> function goes to the item immediately following a specific item.</li></ul>
-<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>
+<p>To retrieve the currently selected item and unselect it, and then select the next item and bring it to the screen:</p>
<pre class="prettyprint">
Evas_Object *list;
next = elm_list_item_next(current);
elm_list_item_selected_set(next, EINA_TRUE);
elm_list_item_bring_in(next);
-</pre>
+</pre></li></ul>
-<h2 id="callback">Using List Callbacks</h2>
+<h2 id="callback">Using the List Callbacks</h2>
- <p>The list component emits the following signals: </p>
+ <p>To receive notifications about the list events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar). 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 item is double-clicked. 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 item is selected. 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 item is unselected. 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 item is long-pressed. 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">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the activated item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the double-clicked item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the selected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unselected item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is long-pressed.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the long-pressed item.</p></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>: An item on the list is highlighted. 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>: An item in the list is unhighlighted. 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">highlighted</span>: An item on the list is highlighted.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the highlighted item.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: An item in the list is unhighlighted.
+ <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unhighlighted item.</p></li>
</ul>
-<p>The following example shows how to register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal. 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 following 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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
+// Callback for the "clicked,double" signal
+// Called when the button is double-clicked by the user
void
-double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
elm_Object_Item *it = event_info;
- elm_list_selected_item_set(it, EINA_FALSE);
+ elm_list_selected_item_set(it, EINA_FALSE);
}
</pre>
<li><a href="#use">Using 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>
+ <li><a href="#callback">Using the Map Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<h2 id="add">Adding a Map Component</h2>
-<p>Create the map component with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, and set the zoom level to 12:</p>
+<p>To create a map component:</p>
+<ol>
+<li>Add a map component with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function:
<pre class="prettyprint">
Evas_Object *map, *parent;
map = elm_map_add(parent);
+</pre></li>
+
+<li><p>Set the zoom mode with the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_mode_set()</span> function.</p>
+<p>To set the mode to manual:</p>
+<pre class="prettyprint">
elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
-elm_map_zoom_set(map, 12);
</pre>
+<p>The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> or <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span>. However, in that case you cannot use the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function to set the zoom level.</p>
+</li>
+<li>Set the zoom level with the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function.
+<p>To set the zoom level to 12:</p>
-<p>In this example, 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>
+<pre class="prettyprint">
+elm_map_zoom_set(map, 12);
+</pre></li></ol>
<h2 id="use">Using the Map</h2>
<p>To use the map:</p>
<ul>
<li>
-<p>Show a specific area on the map based on coordinates (2 2 N, 48 8 E):</p>
+<p>Show a specific area on the map based on coordinates using the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_mode_set()</span> function.</p>
+<p>To show the area (2 2 N, 48 8 E):</p>
<pre class="prettyprint">
elm_map_region_show(map, 2.2, 48.8);
</pre>
-<p>The example shows the desired coordinates.</p>
-<p>The location can also be shown with a bring-in animation.</p>
+<p>To show a specific area with a bring-in animation, use the <span style="font-family: Courier New,Courier,monospace">elm_map_region_bring_in()</span> function:</p>
<pre class="prettyprint">
elm_map_region_bring_in(map, 2.2, 48.8);
</pre>
</li>
<li>
-<p>Rotate the map 90 degrees around the current position:</p>
+<p>Rotate the map around a specific position using the <span style="font-family: Courier New,Courier,monospace">elm_map_rotate_set()</span> function.</p>
+<p>To rotate 90 degrees around the current position:</p>
<pre class="prettyprint">
elm_map_rotate_set(map, 90, 2.2, 48.8);
</pre>
<p>To draw overlays:</p>
<ol>
<li>Create an overlay class.
-<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 bigger than 8.</p>
+<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.</p>
+
+<p>Set the minimum zoom level at which the class is visible using the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_displayed_zoom_min_set()</span> function. Set the icon displayed in place of the forest class on the map using the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
-<p>Set an icon ("Home" icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
+<p>To make the forest overlay visible when the zoom level is bigger than 8, and to use the "Home" icon to display the forests on the map:</p>
<pre class="prettyprint">
Evas_Object *icon;
Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
</li>
<li>Add overlays to the class.
-<p>After creating a forest class, it is possible to add overlay objects to it. In this example, 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>
+<p>After creating a forest class, it is possible to add overlay objects to it. In this example, overlays for the Meudon and Fausse forests are 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>
<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>
+ <td class="note">Do not use the same icon object for 2 different overlays. Create a new icon object each time you need one.</td>
</tr>
</tbody>
</table>
elm_map_overlay_class_append(forest_class, ovl);
</pre>
-<p>If you add another overlay to the forest class, the 2 overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped. In the following example, overlay members of the forest class are grouped when the map is displayed at less than zoom level 8.</p>
+<p>When you add multiple overlays to the overlay class, the overlays can be grouped under the overlay class icon on certain zoom levels. In the following example, the overlay members of the forest class are grouped when the map is displayed at less than zoom level 8.</p>
<pre class="prettyprint">
elm_map_overlay_class_zoom_max_set(forest_class, 8);
</pre>
</li>
-<li>Add bubbles to follow an overlay.
-<p>The following example shows how to set content in a bubble following an overlay.</p>
+<li>Add a bubble to follow an overlay:
<pre class="prettyprint">
// Add an overlay bubble object
elm_map_overlay_bubble_follow(bubble, ovl);
</pre>
-<p>Once following an overlay, the bubble appears, moves, or hides following the parent overlay's behavior.</p>
+<p>Once the bubble has been set to follow the overlay, it appears, moves, and hides following the parent overlay's behavior.</p>
<p>Add content to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
</li>
-<li id="other_overlay">Add other overlays.
-
-<p>You can draw a circle on the map with coordinates and a radius size.</p>
+<li id="other_overlay">Add other overlays:
+<ul><li>
+<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 200 x 0 coordinate (in pixels).</p>
+</pre></li>
+<li>
+<p>You can add a scale at the 200 x 0 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>
+</li>
+<li>
+<p>You can 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</a> API.</p></li></ul>
</li>
</ol>
<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> function. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
+<p>To calculate a route between a starting point and an ending point, use the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> function. The type of transport and the routing calculation method can be provided to achieve 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>
+<p>The following example shows how to calculate a route 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,
evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
</pre>
-<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
+<p>Once the route is calculated, use the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback to create a route overlay object and change its color:</p>
<pre class="prettyprint">
static void
_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
}
</pre>
-<h2 id="callback">Using Map Callbacks</h2>
+<h2 id="callback">Using the Map Callbacks</h2>
-<p>The map component emits the following callbacks:</p>
+<p>To receive notifications about the map events, listen to the following signals:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The map is clicked without dragging around.</li>
<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The map is double-clicked.</li>
<li><span style="font-family: Courier New,Courier,monospace">press</span>: The map is pressed down on.</li>
<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The map is pressed down 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">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>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: The zoom animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: The 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">tile,load</span>: The map tile image load begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: The map tile image load ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: The map tile image load fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: The route request begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: The route request ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: The route request fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: The name request begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: The name request ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: The 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>
<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>
+ <li><a href="#callback">Using the Notify Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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. The <a href="component_popup_mn.htm">popup</a> component is very similar to the notify component, but supports many common layouts.</p>
+ <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and
become automatically hidden after a certain amount of time. The <a href="component_popup_mn.htm">popup</a> component is very similar to the notify component, but supports many common layouts.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Notify.html">Notify</a> API.</p>
<h2 id="add">Adding a Notify Component</h2>
-<p>To add a notify object, use the <span style="font-family: Courier New,Courier,monospace">elm_notify_add()</span> function:</p>
+<p>To create a notify object, use the <span style="font-family: Courier New,Courier,monospace">elm_notify_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *notify, *parent;
+
notify = elm_notify_add(parent);
</pre>
<ul>
<li>
-<p>Create a label and add it to the notify object:</p>
+<p>Create a label for the notify component:</p>
<pre class="prettyprint">
Evas_Object *content;
</pre>
</li>
<li>
-<p>In the following example, the notify object is shown on the bottom center of the parent object. The parameter has a value between 0.0 and 1.0, which means the portion of the notify component's position in the parent window. The <span style="font-family: Courier New,Courier,monospace">ELM_NOTIFY_ALIGN_FILL</span> attribute can be used to fill the notify component in each axis direction.</p>
+<p>Set the notify component alignment using the <span style="font-family: Courier New,Courier,monospace">elm_notify_align_set()</span> function.</p>
+<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the notify component's position within the parent window. The <span style="font-family: Courier New,Courier,monospace">ELM_NOTIFY_ALIGN_FILL</span> value can be used to fill the notify component in each axis direction.</p>
+<p>To align the notify object on the bottom center of the parent object:</p>
<pre class="prettyprint">
elm_notify_align_set(notify, 0.5, 1.0);
</pre>
</li>
<li>
-<p>Set a timeout interval, after which the notify component is hidden. In the following example, the timeout interval is 5 seconds.</p>
+<p>Set a timeout interval, after which the notify component is hidden.</p>
+<p>To set the timeout interval to 5 seconds:</p>
<pre class="prettyprint">
elm_notify_timeout_set(notify, 5.0);
</li>
</ul>
-<h2 id="callback">Using Notify Callbacks</h2>
+<h2 id="callback">Using the Notify Callbacks</h2>
-<p>The notify component emits the following signals:</p>
+<p>To receive notifications about the notify events, listen to 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>
+ <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 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>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter 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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
}
-// Callback function for the "timeout" signal
-// The timeout expires and the notify object is hidden
+// Callback for the "timeout" signal
+// Called when the timeout expires and the notify component is hidden
void
timeout_cb(void *data, Evas_Object *obj, void *event_info)
<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>
+ <li><a href="#callback">Using the Notify Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The notify component displays a container in a particular region of the parent object. It can receive some content, and become automatically hidden after a certain amount of time.</p>
+
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Notify.html">Notify</a> API.</p>
-
<p class="figure">Figure: Notify hierarchy</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>To add a notify object, use the <span style="font-family: Courier New,Courier,monospace">elm_notify_add()</span> function:</p>
+<p>To create a notify object, use the <span style="font-family: Courier New,Courier,monospace">elm_notify_add()</span> function:</p>
+
<pre class="prettyprint">
Evas_Object *notify, *parent;
+
notify = elm_notify_add(parent);
</pre>
<ul>
<li>
-<p>Create a label and add it to the notify object:</p>
+<p>Create a label for the notify component:</p>
<pre class="prettyprint">
Evas_Object *content;
</pre>
</li>
<li>
-<p>In the following example, the notify object is shown on the bottom left corner of the parent object.</p>
+<p>Set the notify component alignment using the <span style="font-family: Courier New,Courier,monospace">elm_notify_align_set()</span> function.</p>
+<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the notify component's position within the parent window. The <span style="font-family: Courier New,Courier,monospace">ELM_NOTIFY_ALIGN_FILL</span> value can be used to fill the notify component in each axis direction.</p>
+<p>To align the notify object to 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>
</li>
<li>
-<p>Set a timeout interval, after which the notify component is hidden. In the following example, the timeout interval is 5 seconds.</p>
+<p>Set a timeout interval, after which the notify component is hidden.</p>
+<p>To set the timeout interval to 5 seconds:</p>
<pre class="prettyprint">
elm_notify_timeout_set(notify, 5.0);
</li>
</ul>
-<h2 id="callback">Using Notify Callbacks</h2>
+<h2 id="callback">Using the Notify Callbacks</h2>
-<p>The notify component emits the following signals:</p>
+<p>To receive notifications about the notify events, listen to 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>
+ <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 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>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter 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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
}
-// Callback function for the "timeout" signal
-// The timeout expires and the notify object is hidden
+// Callback for the "timeout" signal
+// Called when the timeout expires and the notify component is hidden
void
timeout_cb(void *data, Evas_Object *obj, void *event_info)
<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>
+ <li><a href="#panel_cb">Using the Panel Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<h2 id="add_panel">Adding a Panel Component</h2>
-<p>To add a panel and set its orientation to the left:</p>
+<p>To create a panel, use the <span style="font-family: Courier New,Courier,monospace">elm_panel_add()</span> function. You can set the panel orientation with the <span style="font-family: Courier New,Courier,monospace">elm_panel_orient_set()</span> function.</p>
+<p>The following example adds a panel and sets its orientation to the left:</p>
<pre class="prettyprint">
Evas_Object *panel, *parent;
<h2 id="create_drawer">Creating a Drawer</h2>
-<p>Tizen SDK has implemented a layout theme to add a drawer in the application.</p>
+<p>You can use the layout theme from the Tizen SDK to add a drawer in the application.</p>
<p>To add a new Elementary layout object and set the theme of this layout to the drawer:</p>
<ol>
-<li>Create the layout object and the drawer:
+<li>Create a layout object and a drawer:
<pre class="prettyprint">
Evas_Object *layout;
</pre>
</li>
<li>
-<p>Create the panel object and swallow the it in the new layout:</p>
+<p>Create a panel object and swallow it in the new layout:</p>
<pre class="prettyprint">
panel = elm_panel_add(layout);
elm_panel_scrollable_set(panel, EINA_TRUE);
</pre>
</li>
<li>Set the panel background and toggle button.
-<p>You can set content to the <span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span>. You must set a button on the <span style="font-family: Courier New,Courier,monospace">naviframe/drawers</span> part.</p>
+<p>You can set the content to the <span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span>. Set the button on the <span style="font-family: Courier New,Courier,monospace">naviframe/drawers</span> part.</p>
<pre class="prettyprint">
// Panel background (dimmed area)
Evas_Object *bg;
</li>
</ol>
-<h2 id="panel_cb">Using Panel Callbacks</h2>
+<h2 id="panel_cb">Using the 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 <span style="font-family: Courier New,Courier,monospace">Elm_Panel_Scroll_Info</span> type.</p>
+<p>To receive notifications about the panel events, listen to the <span style="font-family: Courier New,Courier,monospace">scroll</span> signal, which is called when the user scrolls the panel.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is of the <span style="font-family: Courier New,Courier,monospace">Elm_Panel_Scroll_Info</span> type.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">scroll</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(pan, "scroll", panel_scroll_cb, bg);
}
-// Callback function for the "scroll" signal
-// This callback is called when the user scrolls the panel
+
+// Callback for the "scroll" signal
+// Called when the user scrolls the panel
static void
panel_scroll_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+ <li><a href="#use_zoom">Using the Photocam Zoom</a></li>
+ <li><a href="#photocam_cb">Using the Photocam Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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 the <span style="font-family: Courier New,Courier,monospace">.jpeg</span> images format and has a low memory footprint.</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 the <span style="font-family: Courier New,Courier,monospace">.jpeg</span> image format and has a low memory footprint.</p>
<p>The photocam component implements the scroller interface, which means that scroller functions can be used with the photocam component.</p>
<h2 id="add_photocam">Adding a Photocam Component</h2>
-<p>To create a photocam component and set an image file on it:</p>
+<p>To create a photocam component, use the <span style="font-family: Courier New,Courier,monospace">elm_photocam_add()</span> function. You can set the image file with the <span style="font-family: Courier New,Courier,monospace">elm_photocam_file_set()</span> function.</p>
<pre class="prettyprint">
Evas_Object *photocam;
+
photocam = elm_photocam_add(win);
elm_photocam_file_set(photocam, "/tmp/photo.jpeg");
</pre>
-<h2 id="use_zoom">Using Photocam Zoom</h2>
+<h2 id="use_zoom">Using the Photocam Zoom</h2>
<p>To use the photocam zoom:</p>
<ul>
<li>
-<p>Set the zoom mode. You can choose between 2 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>
+<p>Set the zoom mode. You can select between 2 automatic and 1 manual zoom mode.</p>
+<p>To set the zoom mode to manual with a double zoom:</p>
<pre class="prettyprint">
elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
elm_photocam_zoom_set(photocam, 2.0);
</pre>
-<p>The zoom mode can be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span>. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> to fill all the pixels of the photocam component.</p>
+<p>If you use the <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span> mode, the photo fits exactly inside the scroll frame with no pixels outside the region. In the <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> mode, all the pixels of the photocam component are filled.</p>
</li>
<li>
-<p>Activate the multi-touch zooming by enabling gestures:</p>
+<p>Activate the multi-touch zoom by enabling gestures:</p>
<pre class="prettyprint">
elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
</pre>
</li>
<li>
-<p>Zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200 x 200), with a width of 400 px and a height of 300 px.</p>
+<p>Zoom in a specific region.</p>
+<p>To zoom in a region starting at the coordinates (200 x 200) with a width of 400 px and a height of 300 px:</p>
<pre class="prettyprint">
elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
</pre>
</li>
</ul>
-<h2 id="photocam_cb">Using Photocam Callbacks</h2>
+<h2 id="photocam_cb">Using the Photocam Callbacks</h2>
-<p>The photocam component emits the following signals:</p>
+<p>To receive notifications about the photocam events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The photo has been clicked without dragging around.</li>
- <li><span style="font-family: Courier New,Courier,monospace">press</span>: The photo has been pressed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The photo has been pressed down for a long time without dragging around.</li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The photo has been double-clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The photo is clicked without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">press</span>: The photo is pressed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The photo is pressed down for a long time without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The photo is double-clicked.</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">loaded,detail</span>: The image file load is complete for the detailed image data (a full resolution version).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: The zoom animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: The 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,anim,start</span>: The scrolling animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The 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>In all cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter 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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">loaded</span> signal:</p>
<pre class="prettyprint">
void
evas_object_smart_callback_add(photocam, "loaded", loaded_cb, data);
}
-// Callback function for the "loaded" signal
-// The photocam has loaded the photo file in a low resolution
-
+// Callback for the "loaded" signal
+// Called when the photo file has been loaded in a low resolution
void
loaded_cb(void *data, Evas_Object *obj, void *event_info)
{
<ul class="toc">
<li><a href="#add">Adding a Plug Component</a></li>
<li><a href="#use">Using the Plug</a></li>
- <li><a href="#callback">Using Plug Callbacks</a></li>
+ <li><a href="#callback">Using the Plug Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by another process. It can be used anywhere the same way as any other elementary UI component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Plug.html">Plug</a> API.</p>
<h2 id="add">Adding a Plug Component</h2>
-<p>To create a plug, use the <span style="font-family: Courier New,Courier,monospace">elm_plug_add()</span> function:</p>
+<p>To create a plug component, use the <span style="font-family: Courier New,Courier,monospace">elm_plug_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *plug, *parent;
+
plug = elm_plug_add(parent);
</pre>
<p>To use the plug:</p>
<ol>
<li>
-<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>The socket image provides the service where to connect the plug component. Use the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
-<p>The following example connects to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
+<p>To connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0:</p>
<pre class="prettyprint">
elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
<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">
+ <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 (<span style="font-family: Courier New,Courier,monospace">remote_win</span>):
+ <pre class="prettyprint">
// Create a remote window in the other process
Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
ELM_WIN_SOCKET_IMAGE);
// Create a socket named "plug_test" and listen to it
elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
-</pre>
+</pre></td>
+ </tr>
+ </tbody>
+ </table>
+
+
</li>
</ol>
-<h2 id="callback">Using Plug Callbacks</h2>
+<h2 id="callback">Using the Plug Callbacks</h2>
-<p>The plug component emits the following signals:</p>
+<p>To receive notifications about the plug events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image was clicked (press/release). The event parameter of the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">image,deleted</span>: The server side was deleted. The event parameter of the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">image,resized</span>: The server side was resized. The event parameter of the callback is <span style="font-family: Courier New,Courier,monospace">Evas_Coord_Size</span> (2 integers).</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image is clicked (press/release).
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">image,deleted</span>: The server side is deleted.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">image,resized</span>: The server side is resized.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">Evas_Coord_Size</span> (2 integers).</p></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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(plug, "clicked", clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when a plug is clicked
+// Callback for the "clicked" signal
+// Called when the plug is clicked
void
clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<ul class="toc">
<li><a href="#add">Adding a Plug Component</a></li>
<li><a href="#use">Using the Plug</a></li>
- <li><a href="#callback">Using Plug Callbacks</a></li>
+ <li><a href="#callback">Using the Plug Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by another process. It can be used anywhere the same way as any other elementary UI component.</p>
+
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Plug.html">Plug</a> API.</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>
+<p>To create a plug component, use the <span style="font-family: Courier New,Courier,monospace">elm_plug_add()</span> function:</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>To use the plug:</p>
+<ol>
+<li>
+<p>The socket image provides the service where to connect the plug component. Use the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function, and define as parameters 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>
+<p>To connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0:</p>
<pre class="prettyprint">
elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+</li>
+<li>
+<p>Retrieve the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image 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);
<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">
+ <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 (<span style="font-family: Courier New,Courier,monospace">remote_win</span>):
+ <pre class="prettyprint">
// Create a remote window in the other process
Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
ELM_WIN_SOCKET_IMAGE);
// Create a socket named "plug_test" and listen to it
elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
-</pre>
+</pre></td>
+ </tr>
+ </tbody>
+ </table>
-<h2 id="callback">Using Plug Callbacks</h2>
-<p>The plug component emits the following signals:</p>
+
+</li>
+</ol>
+
+<h2 id="callback">Using the Plug Callbacks</h2>
+
+<p>To receive notifications about the plug events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the image (press/release). The event parameter of the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">image,deleted</span>: The server side was deleted. The event parameter of the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">image,resized</span>: The server side was resized. The event parameter of the callback is <span style="font-family: Courier New,Courier,monospace">Evas_Coord_Size</span> (2 integers).</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image is clicked (press/release).
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">image,deleted</span>: The server side is deleted.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">image,resized</span>: The server side is resized.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">Evas_Coord_Size</span> (2 integers).</p></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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(plug, "clicked", clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when a plug is clicked
+// Callback for the "clicked" signal
+// Called when the plug is clicked
void
clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<div id="footer">
<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
</div>
-
+
<script type="text/javascript">
var _gaq = _gaq || [];
<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="#orientation">Setting the Popup Orientation</a></li>
- <li><a href="#callback">Using Popup Callbacks</a></li>
+ <li><a href="#styles">Using the Popup Styles</a></li>
+ <li><a href="#areas">Setting the Popup Content</a></li>
+ <li><a href="#orientation">Configuring and Hiding the Popup</a></li>
+ <li><a href="#callback">Using the Popup Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>This feature is supported in mobile applications only.</p>
-<p> The popup component shows a popup area that can contain the following:</p>
+<p> The popup component shows a popup area that can contain:</p>
<ul>
-<li>Title area (optional)</li>
+<li>Title area with an icon and text (optional)</li>
<li>Content area</li>
-<li>Action area (optional)</li>
+<li>Action area with up to 3 buttons (optional)</li>
</ul>
-<p>The optional title area can contain an icon and text, the action area can contain up to 3 buttons.</p>
-
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Popup.html">Popup</a> API.</p>
<p class="figure">Figure: Popup component</p>
popup = elm_popup_add(parent);
</pre>
-<h2 id="styles">Using Popup Styles</h2>
+<h2 id="styles">Using the Popup Styles</h2>
-<p>The following item styles are available for the popup:</p>
+<p>The popup has the following styles:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
<li><span style="font-family: Courier New,Courier,monospace">theme_bg</span></li>
</ul>
-<p>To set the popup style as <span style="font-family: Courier New,Courier,monospace">toast</span>:</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">toast</span>:</p>
<pre class="prettyprint">
elm_object_style_set(popup, "toast");
</pre>
<p class="figure">Figure: Popup toast style</p>
<p align="center"><img alt="Popup toast style" src="../../images/popup_toast_style.png" /></p>
-<h2 id="areas">Setting the Popup Areas</h2>
+<h2 id="areas">Setting the Popup Content</h2>
-<p>To set the popup areas:</p>
+<p>To set the popup content:</p>
<ol>
<li>
-<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 as <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>
+<p>Configure the title area:</p>
+<ul>
+<li>Set the icon object using the <span style="font-family: Courier New,Courier,monospace">title,icon</span> part name.</li>
+<li>Set the title text as <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the <span style="font-family: Courier New,Courier,monospace">title,text</span> part name.</li></ul>
<pre class="prettyprint">
Evas_Object *icon;
</pre>
</li>
<li>
-<p>Set the content of the popup. The content can be simple text.</p>
+<p>Set the content of the popup as:</p>
+<ul><li>Simple text:
<pre class="prettyprint">
elm_object_part_text_set(popup, "default", "Test popup");
-</pre>
+</pre></li>
-<p>The content can also be an Evas object.</p>
+<li>Evas object:
<pre class="prettyprint">
Evas_Object *content;
elm_object_content_set(popup, content);
-</pre>
+</pre></li></ul>
</li>
<li>
-<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>
+<p>Set the action area buttons.</p>
+<p>In the following example, the <strong>OK</strong> and <strong>Cancel</strong> buttons are created:</p>
<pre class="prettyprint">
Evas_Object *button1, *button2;
// Create the 2 buttons
-
button1 = elm_button_add(popup);
elm_object_text_set(button1, "OK");
</pre>
</li>
</ol>
-<h2 id="orientation">Setting the Popup Orientation</h2>
+<h2 id="orientation">Configuring and Hiding the Popup</h2>
-<p>To set the popup orientation, use the <span style="font-family: Courier New,Courier,monospace">elm_popup_align_set()</span> function. The parameter has the value between 0.0 and 1.0, which means the portion of the popup position in the parent object. The <span style="font-family: Courier New,Courier,monospace">ELM_NOTIFY_ALIGN_FILL</span> parameter is used to fill the popup in each axis direction.</p>
+<p>To configure the popup:</p>
+
+<ul>
+<li>Set the popup orientation with the <span style="font-family: Courier New,Courier,monospace">elm_popup_align_set()</span> function.
+<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the popup within the parent object. The <span style="font-family: Courier New,Courier,monospace">ELM_NOTIFY_ALIGN_FILL</span> value is used to fill the popup in each axis direction.</p>
<pre class="prettyprint">
elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-</pre>
+</pre></li>
-<h2 id="callback">Using Popup Callbacks</h2>
-<p>The popup component 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.
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> function is used to hide the popup after a certain time. In the following example, the timeout is set to 5 seconds.</p>
+<li>Hide the popup after a set time with the <span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> function.
+<p>To set the timeout to 5 seconds, after which the popup is hidden:</p>
<pre class="prettyprint">
elm_popup_timeout_set(popup, 5.0);
</pre>
+</li>
-<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
-
+<li>Dismiss the popup with a hide effect using the <span style="font-family: Courier New,Courier,monospace">elm_popup_dismiss()</span> function:
<pre class="prettyprint">
-{
- evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
-}
-
-static void
-_timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
-}
+elm_popup_dismiss(popup);
</pre>
+</li></ul>
+
+<h2 id="callback">Using the Popup Callbacks</h2>
+<p>To receive notifications about the popup events, listen to the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of the timeout.
</li>
<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the blocked event area.
-<p>The visible region of the popup is surrounded by a translucent region called blocked event 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></li>
+<p>The blocked event area is the translucent region around the visible popup region.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">dismissed</span>: The popup is dismissed with a hide effect.
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_popup_dismiss()</span> function is used to dismiss the popup with a hide effect:</p>
-<pre class="prettyprint">
-elm_popup_dismiss(popup);
-</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+</li>
+</ul>
-<p>The popup emits the dismissed signal when it is dismissed. You can register a callback to this signal. Nothing is passed by <span style="font-family: Courier New,Courier,monospace">event_info</span>.</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
}
-// Callback function for the "dismissed" signal
-// This callback is called when the popup is dismissed
+// Callback for the "dismissed" signal
+// Called when the popup is dismissed
void
dismissed_cb(void *data, Evas_Object *obj, void *event_info)
{
dlog_print(DLOG_INFO, LOG_TAG, "dismissed\n");
}
-</pre></li>
-</ul>
+</pre>
<table class="note">
<tbody>
<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 a Rectangular Screen</a></li>
- <li><a href="#set_circ">Setting the Popup Areas for a Circular Screen</a></li>
- <li><a href="#callback">Using Popup Callbacks</a></li>
+ <li><a href="#styles">Using the Popup Styles</a></li>
+ <li><a href="#set">Setting the Popup Content</a></li>
+ <li><a href="#orientation">Hiding the Popup</a></li>
+ <li><a href="#callback">Using the Popup Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>This feature is supported in wearable applications only.</p>
-<p> The popup component shows a popup area that can contain the following:</p>
+<p> The popup component shows a popup area that can contain:</p>
<ul>
-<li>Title area (optional)</li>
+<li>Title area with an icon and text (optional)</li>
<li>Content area</li>
-<li>Action area (optional)</li>
+<li>Action area with up to 3 buttons (optional)</li>
</ul>
-<p>The optional title area can contain an icon and text, the action area can contain up to 3 buttons.</p>
-
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Popup.html">Popup</a> API.</p>
<p class="figure">Figure: Popup component</p>
popup = elm_popup_add(parent);
</pre>
-<h2 id="styles">Using Popup Styles</h2>
+<h2 id="styles">Using the Popup Styles</h2>
+
+<p>The popup has a separate style for the layout and items:</p>
-<p>The following item styles are available for the rectangular screen:</p>
+<ul>
+<li><p>The following item styles are available for the rectangular screen:</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>
+</ul></li>
+<li>
<p>The following item styles are available for the circular screen:</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>
+</ul></li>
+<li>
<p>The following layout styles are available for the circular screen:</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>
+</ul></li></ul>
-<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">toast</span>:</p>
<pre class="prettyprint">
elm_object_style_set(popup, "toast");
</pre>
-<h2 id="set">Setting the Popup Areas for a Rectangular Screen</h2>
+<h2 id="set">Setting the Popup Content</h2>
-<p>To set the popup areas:</p>
+<p>To set the popup content for the rectangular screen:</p>
<ol>
<li>
-<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 as <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>
+<p>Configure the title area:</p>
+<ul>
+<li>Set the icon object using the <span style="font-family: Courier New,Courier,monospace">title,icon</span> part name.</li>
+<li>Set the title text as <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the <span style="font-family: Courier New,Courier,monospace">title,text</span> part name.</li></ul>
<pre class="prettyprint">
elm_object_part_text_set(popup, "title,text", "Test popup");
</pre>
</li>
<li>
-<p>Set the content of the popup. The content can be simple text.</p>
+<p>Set the content of the popup as:</p>
+<ul><li>Simple text:
+
<pre class="prettyprint">
elm_object_text_set(popup, "simple text");
-</pre>
-<p>The content can also be an Evas object.</p>
+</pre></li>
+
+<li>Evas object:
+
<pre class="prettyprint">
Evas_Object *content;
elm_object_content_set(popup, content);
-</pre>
+</pre></li></ul>
</li>
<li>
-<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>
+<p>Set the action area buttons.</p>
+<p>In the following example, the <strong>OK</strong> and <strong>Cancel</strong> buttons are created:</p>
<pre class="prettyprint">
Evas_Object *button1, *button2;
</li>
</ol>
-<h2 id="set_circ">Setting the Popup Areas for a Circular Screen</h2>
+<p>To set the popup content for the circular screen:</p>
<ol>
<li>
-<p>Set the circle style and the layout of the popup.</p>
+<p>Set the circular popup item and layout style:</p>
<pre class="prettyprint">
-// Setting the style
+// Setting the item style
elm_object_style_set(popup, "circle");
-// Setting the layout
+// Setting the layout style
layout = elm_layout_add(popup);
elm_layout_theme_set(layout, "layout", "popup", "content/circle/buttons2");
</pre>
</li>
<li>
-<p>To configure the title area, set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the <span style="font-family: Courier New,Courier,monospace">elm.text.title</span> partname.</p>
+<p>Configure the title area.</p>
+<p>Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the <span style="font-family: Courier New,Courier,monospace">elm.text.title</span> part name:</p>
<pre class="prettyprint">
// Setting the title text
elm_object_part_text_set(layout, "elm.text.title", "Text popup");
</pre>
</li>
<li>
-<p>Set the content of the popup. The content can be simple text.</p>
+<p>Set the content to the layout as:</p>
+<ul>
+<li>Simple text:
<pre class="prettyprint">elm_object_part_text_set(layout, "elm.text.content", "Test popup");
-</pre>
+</pre></li>
-<p>The content of the popup can also be an Evas object.</p>
+<li>Evas object:
<pre class="prettyprint">
Evas_Object *content;
elm_object_content_set(layout, content);
-</pre>
+</pre></li></ul>
</li>
<li>
-<p>Set the popup content:</p>
+<p>Set the layout content to the popup:</p>
<pre class="prettyprint">
elm_object_content_set(popup, layout);
</pre>
</li>
<li>
-<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>
+<p>Set the action area buttons.</p>
+<p>In the following example, 2 icon buttons are created:</p>
<pre class="prettyprint">
Evas_Object *button1, *button2, *icon;
</li>
</ol>
-<h2 id="callback">Using Popup Callbacks</h2>
-<p>The popup component 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.
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> function is used to hide the popup after a certain time. In the following example, the timeout is set to 5 seconds.</p>
+<h2 id="orientation">Hiding the Popup</h2>
+
+<p>You can hide the popup after a set time with the <span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> function.</p>
+<p>To set the timeout to 5 seconds, after which the popup is hidden:</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>
+<h2 id="callback">Using the Popup Callbacks</h2>
+
+<p>To receive notifications about the popup events, listen to the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of the timeout.
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the blocked event area.
+<p>The blocked event area is the translucent region around the visible popup region.</p></li>
+</ul>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal:</p>
+
<pre class="prettyprint">
{
evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
}
</pre>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the blocked event area.
-<p>The visible region of the popup is surrounded by a translucent region called blocked event 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></li>
-</ul>
+
<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="#use">Using the Progressbar</a></li>
<li><a href="#callback">Using the Progressbar Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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, which means that the layout component functions can be used on the progressbar component.</p>
+<p>The progressbar component is used to display the progress status of a given job. It inherits from the layout component, which means that layout functions can be used on the progressbar component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Progressbar.html">Progress bar</a> API.</p>
Evas_Object *pb = elm_progressbar_add(win);
</pre>
-<h2 id="styles">Using the Progressbar Styles</h2>
+<h2 id="configure">Configuring the Progressbar</h2>
-<p>The progressbar has several styles:</p>
+<p>To configure the progressbar:</p>
+<ul>
+<li>Set the progressbar styles.
+<p>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">pending_list</span></li>
<li><span style="font-family: Courier New,Courier,monospace">process_small</span></li>
</ul>
-<p>In the following example, the style of the progressbar is set to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
-
<pre class="prettyprint">
elm_object_style_set(pb, "pending_list");
</pre>
-
-<h2 id="use">Using the Progressbar</h2>
-
+</li>
+<li>Modify the progressbar elements.
<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>To modify the label, icon, and unit label:</p>
<ul>
<li>
-<p>Set a label. In this example it is named <span style="font-family: Courier New,Courier,monospace">Test label</span>.</p>
+<p>To set the label text, use the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:</p>
<pre class="prettyprint">
elm_object_text_set(pb, "Test label");
</pre>
</li>
<li>
-<p>Set an icon with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function using the <span style="font-family: Courier New,Courier,monospace">icon</span> partname:</p>
+<p>To set an icon, use the <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">
elm_object_part_content_set(pb, "icon", icon_object);
</pre>
</li>
<li>
-<p>Modify the unit label format string using a <span style="font-family: Courier New,Courier,monospace">printf</span> style format. Set it to be a float number with 2 decimals.</p>
+<p>To modify the unit label format string, use the <span style="font-family: Courier New,Courier,monospace">printf</span> style format.</p>
+<p>To set the unit label to be a float number with 2 decimals:</p>
<pre class="prettyprint">
elm_progressbar_unit_format_set(pb, "%1.2f%%");
</pre>
</li>
</ul>
-
-<h2 id="configure">Configuring the Progressbar</h2>
-
-<p>To configure the progressbar:</p>
-<ul>
+</li>
<li>
<p>Activate the progressbar pulse mode to make the progressbar loop infinitely between the start and end position:</p>
<pre class="prettyprint">
</pre>
</li>
<li>
-<p>Invert the progressbar. In the inverted mode the high values are on the left and the low values on the right.</p>
+<p>Invert the progressbar.</p>
+<p>In the inverted mode, 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>
</li>
+
<li>
-<p>Change the value with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. In the following example, the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<p>Set the orientation of the progressbar to vertical instead of the default horizontal orientation:</p>
<pre class="prettyprint">
-elm_progressbar_value_set(pb, 0.2);
+elm_progressbar_horizontal_set(pb, EINA_FALSE);
</pre>
</li>
+</ul>
+
+<h2 id="use">Using the Progressbar</h2>
+
+<p>To use the progressbar:</p>
+
+<ul>
<li>
-<p>Read the current value:</p>
+<p>Read the current value with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_get()</span> function:</p>
<pre class="prettyprint">
double value = elm_progressbar_value_get(pb);
</pre>
</li>
<li>
-<p>Set the orientation of the progressbar to vertical instead of the default horizontal orientation:</p>
+<p>Change the value with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function.</p>
+<p>To set the value to 20%:</p>
<pre class="prettyprint">
-elm_progressbar_horizontal_set(pb, EINA_FALSE);
+elm_progressbar_value_set(pb, 0.2);
</pre>
</li>
+
</ul>
<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>
+<p>To receive notifications about the progressbar events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when the progressbar value changes.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(pb, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the progressbar value changes
+// Callback for the "changed" signal
+// Called when the progressbar value changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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 a Rectangular Screen</a></li>
- <li><a href="#configure_circ">Configuring the Progressbar for a Circular Screen</a></li>
+ <li><a href="#configure">Configuring the Progressbar</a></li>
+ <li><a href="#use">Using the Progressbar</a></li>
<li><a href="#callback">Using the Progressbar Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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>The progressbar component is used to display the progress status of a given job. It inherits from the layout component, which means that layout functions can be used on the progressbar component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Progressbar.html">Progress bar</a> API.</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>
+
<p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
<h2 id="add">Adding a Progressbar Component</h2>
Evas_Object *pb = elm_progressbar_add(win);
</pre>
-<h2 id="styles">Using the Progressbar Styles</h2>
+<h2 id="configure">Configuring the Progressbar</h2>
-<p>The progressbar has several styles.</p>
-<ul>
-<li>
-<p>The following styles are available for a rectangular UI screen:</p>
+<p>To set the progressbar styles:</p>
+<ul><li><p>The following styles are available for a rectangular UI screen:</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>
-</li>
-<li>
-<p>The following styles are available for a circular UI screen:</p>
+</ul></li>
+<li><p>The following styles are available for a circular UI screen:</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>
-</li>
-</ul>
-
-<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>:</p>
-
+</ul></li></ul>
<pre class="prettyprint">
elm_object_style_set(pb, "pending_list");
</pre>
-<h2 id="configure_rect">Configuring the Progressbar for a Rectangular Screen</h2>
-
-<p>To configure the progressbar:</p>
+<p>To configure the progressbar for the rectangular UI screen:</p>
<ul>
<li>
<p>Activate the progressbar pulse mode to make the progressbar loop infinitely between the start and end position:</p>
</pre>
</li>
<li>
-<p>Invert the progressbar. In the inverted mode the high values are on the left and the low values on the right.</p>
+<p>Invert the progressbar.</p>
+<p>In the inverted mode, 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>
</li>
-<li>
-<p>Change the value with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. In the following example, 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>
-</li>
-<li>
-<p>Read the current value:</p>
-<pre class="prettyprint">
-double value = elm_progressbar_value_get(pb);
-</pre>
-</li>
</ul>
-<h2 id="configure_circ">Configuring the Progressbar for a Circular Screen</h2>
+<h2 id="use">Using the Progressbar</h2>
+
+<p>To use the progressbar:</p>
-<p>To configure the progressbar:</p>
<ul>
<li>
-<p>Change the value with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. In the following example, the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<p>Read the current value with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_get()</span> function:</p>
<pre class="prettyprint">
-elm_progressbar_value_set(pb, 0.2);
+double value = elm_progressbar_value_get(pb);
</pre>
</li>
<li>
-<p>Read the current value:</p>
+<p>Change the value with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function.</p>
+<p>To set the value to 20%:</p>
<pre class="prettyprint">
-double value = elm_progressbar_value_get(pb);
+elm_progressbar_value_set(pb, 0.2);
</pre>
</li>
+
</ul>
<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>
+<p>To receive notifications about the progressbar events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when the progressbar value changes.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(pb, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the progressbar value changes
+// Callback for the "changed" signal
+// Called when the progressbar value changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<p>This feature is supported in mobile applications only.</p>
<p>The radio component displays 1 or more options of which only 1 can be selected. The component is composed of an indicator (selected or unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio objects, it can also be used alone.</p>
-<p>The radio component inherits from the layout component, which means that layout functions can be used with radio objects.</p>
+<p>The radio component inherits from the layout component, which means that layout functions can be used on the radio component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Radio.html">Radio</a> API.</p>
<h2 id="add">Adding a Radio Component</h2>
-<p>Create a radio component and set a label to it:</p>
+<p>To create a radio component, use the <span style="font-family: Courier New,Courier,monospace">elm_radio_add()</span> function. You can set a label with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
<pre class="prettyprint">
Evas_Object *radio, *parent;
<h2 id="value">Changing the Radio Value</h2>
-<p>One of a set of values can be selected with the radio component. Each radio object from a group of radio objects represents an integer value. In the following example, the value 1 is set to the new radio object.</p>
+<p>The radio component allows the user to select one of a set of values. Each radio component in a radio group represents an integer value. You can set the value with the <span style="font-family: Courier New,Courier,monospace">elm_radio_state_value_set()</span> function.</p>
+
+<p>To set the value of the radio component to 1:</p>
<pre class="prettyprint">
elm_radio_state_value_set(radio, 1);
</pre>
<h2 id="group">Managing the Radio Groups</h2>
-<p>To manage radio groups:</p>
+<p>To create a radio group:</p>
<ol>
<li>
-<p>Create a group of radio objects with at least 2 radio components:</p>
+<p>Create a group with at least 2 radio components:</p>
<pre class="prettyprint">
// Create another radio object
Evas_Object *radio2 = elm_radio_add(parent);
</pre>
</li>
<li>
-<p>Choose which of the radio components is selected. In the following example, <span style="font-family: Courier New,Courier,monospace">radio2</span> is selected.</p>
+<p>Set one of the radio components as selected.</p>
+<p>In the following example, <span style="font-family: Courier New,Courier,monospace">radio2</span> is selected:</p>
<pre class="prettyprint">
elm_radio_value_set(group, 2);
</pre>
</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> function to see the currently selected radio of the group. The <span style="font-family: Courier New,Courier,monospace">elm_radio_value_pointer_set()</span> function sets a pointer to an integer to change when the radio group value changes.</p>
+</ol>
+
+<p>To determine which radio component of the group is currently selected, use the <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_radio_value_pointer_set()</span> function sets a pointer to an integer to change when the radio group value changes:</p>
<pre class="prettyprint">
int val;
elm_radio_value_pointer_set(group, &val);
</pre>
-</li>
-</ol>
+
<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>
+<p>To receive notifications about the radio events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when a radio component state changes in a radio group.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(radio, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the radio value changes
+// Callback for the "changed" signal
+// Called when the radio state changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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 a Circular Screen</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>This feature is supported in wearable applications only.</p>
<p>The radio component displays 1 or more options of which only 1 can be selected. The component is composed of an indicator (selected or unselected). Even though it is usually grouped with 2 or more other radio objects, it can also be used alone.</p>
-<p>The radio component inherits from the layout component, which means that layout functions can be used with radio objects.</p>
+<p>The radio component inherits from the layout component, which means that layout functions can be used on the radio component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Radio.html">Radio</a> API.</p>
<h2 id="add">Adding a Radio Component</h2>
-<p>Create a radio component:</p>
+<p>To create a radio component, use the <span style="font-family: Courier New,Courier,monospace">elm_radio_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *radio, *parent;
<h2 id="value">Changing the Radio Value</h2>
-<p>One of a set of values can be selected with the radio component. Each radio object from a group of radio objects represents an integer value. In the following example, the value 1 is set to the new radio object.</p>
+<p>The radio component allows the user to select one of a set of values. Each radio component in a radio group represents an integer value. You can set the value with the <span style="font-family: Courier New,Courier,monospace">elm_radio_state_value_set()</span> function.</p>
+
+<p>To set the value of the radio component to 1:</p>
<pre class="prettyprint">
elm_radio_state_value_set(radio, 1);
</pre>
<h2 id="group">Managing the Radio Groups</h2>
-<p>To manage radio groups:</p>
+<p>To create a radio group:</p>
<ol>
<li>
-<p>Create a group of radio objects with at least 2 radio components:</p>
+<p>Create a group with at least 2 radio components:</p>
<pre class="prettyprint">
// Create another radio object
Evas_Object *radio2 = elm_radio_add(parent);
</pre>
</li>
<li>
-<p>Choose which of the radio components is selected. In the following example, <span style="font-family: Courier New,Courier,monospace">radio2</span> is selected.</p>
+<p>Set one of the radio components as selected.</p>
+<p>In the following example, <span style="font-family: Courier New,Courier,monospace">radio2</span> is selected:</p>
<pre class="prettyprint">
elm_radio_value_set(group, 2);
</pre>
</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> function to see the currently selected radio of the group.</p>
-</li>
</ol>
-<h2 id="callback">Using the Radio Callbacks</h2>
+<p>To determine which radio component of the group is currently selected, use the <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> function.</p>
-<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>
+<h2 id="callback">Using the Radio Callbacks</h2>
+<p>To receive notifications about the radio events, listen to the following signals:</p>
+ <ul>
+ <li>In rectangular screen devices:
+ <ul><li><span style="font-family: Courier New,Courier,monospace">changed</span>: The radio component state changes in a radio group.</li></ul>
+ </li>
+ <li>In circular screen devices:
+ <ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The radio component state changes in a radio group.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The radio component is clicked (selected with a touch).</li>
+</ul>
+</li>
+ </ul>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(radio, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the radio value changes
+// Callback for the "changed" signal
+// Called when the radio state changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
}
</pre>
-<h2 id="callback_circ">Using the Radio Callbacks with a Circular Screen</h2>
-
-<p>The radio component for the circular screen emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The slider value is changed.</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 the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(radio, "clicked", clicked_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the radio value changes
-void
-changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "This radio was clicked\n");
-}
-</pre>
-
<table class="note">
<tbody>
<tr>
<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="#items">Managing Segmentcontrol Items</a></li>
<li><a href="#callback">Using the Segmentcontrol Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<p>This feature is supported in mobile applications only.</p>
-<p>The segmentcontrol 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>The segmentcontrol component inherits from the layout component, which means that layout functions can be used on segmentcontrol objects.</p>
+<p>The segmentcontrol component consists of several segment items. A segment item is similar to a discrete 2-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>The segmentcontrol component inherits from the layout component, which means that layout functions can be used on the segmentcontrol component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__SegmentControl.html">SegmentControl</a> API.</p>
-<p class="figure">Figure: Segmentcontrol (with text on left and with icons on right)</p>
+<p class="figure">Figure: Segmentcontrol component (with text on left and with icons on right)</p>
<p align="center"><img alt="Segmentcontrol with text" src="../../images/segment_text.png" /> <img alt="Segmentcontrol with icons" src="../../images/segment.png" /></p>
<p class="figure">Figure: Segmentcontrol hierarchy</p>
segcontrol = elm_segment_control_add(parent);
</pre>
-<h2 id="items">Adding Items</h2>
+<h2 id="items">Managing Segmentcontrol Items</h2>
-<p>To add items to the segmentcontrol component:</p>
-<ol>
-<li>Add the items. In the following example, 4 items containing only text labels (no icons) are added.
+<p>To manage segmentcontrol items:</p>
+
+<ul>
+<li>Add items to the segmentcontrol component with the <span style="font-family: Courier New,Courier,monospace">elm_segment_control_item_add()</span> function.
+<p>In the following example, 4 items containing only text labels (no icons) are added:</p>
<pre class="prettyprint">
Elm_Object_Item *it;
int count, idx;
elm_segment_control_item_add(segcontrol, NULL, "item3");
it = elm_segment_control_item_add(segcontrol, NULL, "item4");
</pre>
-</li>
-<li>
-<p>Manage the items:</p>
-<ul>
-<li>Insert an item at a specific position starting at 0:
-<pre class="prettyprint">
-elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);
-</pre></li>
-<li>Delete an item:
+<p>To insert an item at a specific position starting from 0:</p>
<pre class="prettyprint">
-elm_segment_control_item_del_at(segcontrol, 2);
+elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);
</pre></li>
-<li>Set the selected state of an item manually:
+<li>Set the state of the item to selected:
<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>
-<li>Get the selected item:
+
+<li>Get items:
<pre class="prettyprint">
+// Get the selected item
it = elm_segment_control_item_selected_get(segcontrol);
-</pre></li>
-<li>Get the item placed at a specified index:
-<pre class="prettyprint">
+
+// Get the item placed at a specified index
it = elm_segment_control_item_get(segcontrol, 2);
</pre></li>
-<li>Get the item count from the segment control:
+
+<li>Get the item count from the segmentcontrol:
<pre class="prettyprint">
count = elm_segment_control_item_count_get(segcontrol);
</pre></li>
<pre class="prettyprint">
idx = elm_segment_control_item_index_get(it);
</pre></li>
+
+<li>Delete an item and disable the entire segmentcontrol:
+<pre class="prettyprint">
+elm_segment_control_item_del_at(segcontrol, 2);
+
+elm_object_disabled_set(segcontrol, EINA_TRUE);
+</pre></li>
</ul>
-</li>
-</ol>
<h2 id="callback">Using the Segmentcontrol Callbacks</h2>
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which 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>
+<p>To receive notifications about the segmentcontrol events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when the user clicks on a segment item that was not previously selected.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the segment item pointer.</p>
+
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the segcontrol selected item changes
+// Callback for the "changed" signal
+// Called when the selected segment item changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<p>The 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>
+<li><span style="font-family: Courier New,Courier,monospace">center_point</span>
+<p>The <span style="font-family: Courier New,Courier,monospace">0</span> point is in the middle of the slider.</p></li>
</ul>
-<p>To set the style to <span style="font-family: Courier New,Courier,monospace">center_point</span>:</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">center_point</span>:</p>
<pre class="prettyprint">
elm_object_style_set(slider, "center_point");
</pre>
-<p>With this style, the slider <span style="font-family: Courier New,Courier,monospace">0</span> point is in the middle of the UI component.</p>
<h2 id="configure">Configuring the Slider</h2>
<p>To configure the slider:</p>
<ul>
<li>
-<p>Set the orientation with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and invert it the same way as the progressbar component. In the following example, the slider is set to vertical and inverted.</p>
+<p>Set the orientation with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and invert it with the <span style="font-family: Courier New,Courier,monospace">elm_slider_inverted_set()</span> function (the same way as the <a href="component_progressbar_mn.htm">progressbar</a>).</p>
+<p>In the following example, the slider 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>
</li>
<li>
-<p>Set 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 to the slider:</p>
+<p>Set icons (<span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span> part names), a label, a unit label, and an indicator label to the slider:</p>
<pre class="prettyprint">
Evas_Object *icon1, *icon2;
</pre>
</li>
<li>
-<p>Set the minimum and maximum values to the slider with the <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span> function. The current value is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span> function. The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<p>Set the minimum and maximum values to the slider with the <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span> function, and the current value with the <span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span> function.</p>
+<p>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>
</li>
<li>
-<p>Set the slider span with the <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> function. The span of the slider represents its length horizontally or vertically. It is scaled by the object or applications scaling factor. </p>
+<p>Set the slider span with the <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> function. The span of the slider represents its length horizontally or vertically. It is scaled by the object or application scaling factor. </p>
</li>
<li>
<p>Disable the slider indicator size.</p>
-<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>
+<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 gets the state of the indicator enlargement (enabled or disabled) and then changes 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
+// Change the behavior
elm_slider_indicator_show_set(slider, !enlarge);
</pre>
</li>
<h2 id="callback">Using the Slider Callbacks</h2>
-<p>The slider component emits the following signals:</p>
+<p>To receive notifications about the slider events, listen to 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>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The user stops dragging for a very short period or releases the finger or mouse. The signal is emitted a short time after the user changes the value, to avoid 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>
+<p>In all these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(slider, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the slider value changes
+// Callback for the "changed" signal
+// Called when the slider value changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>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>The slider component is a draggable bar that is used to select a value within a certain range. It is used with rectangular UI components.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Slider.html">Slider</a> API.</p>
slider = elm_slider_add(parent);
</pre>
-<h2 id="styles">Using the Slider Styles</h2>
-
-<p>The slider has the following styles:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-</ul>
+<p>The slider component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
<h2 id="configure">Configuring the Slider</h2>
<p>To configure the slider:</p>
<ul>
<li>
-<p>Set icons (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> partname), a label, a unit label, and an indicator label to the slider:</p>
+<p>Set an icon (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> part name), label, unit label, and indicator label to the slider:</p>
<pre class="prettyprint">
Evas_Object *icon1, *icon2;
-// Set the icons
+// Set the icon
elm_object_part_content_set(slider, "elm.swallow.icon", icon1);
// Set the unit format
</pre>
</li>
<li>
-<p>Set the minimum and maximum values to the slider with the <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span> function. The current value is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span> function. The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<p>Set the minimum and maximum values to the slider with the <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span> function, and the current value with the <span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span> function.</p>
+<p>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>
</li>
<li>
-<p>Set the slider span with the <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> function. The span of the slider represents its length horizontally. The span is scaled by the object or applications scaling factor.</p>
-</li>
-<li>
<p>Retrieve the current value of the slider:</p>
<pre class="prettyprint">
double value = elm_slider_value_get(slider);
</pre>
</li>
<li>
+<p>Set the slider span with the <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> function. The span of the slider represents its length horizontally. The span is scaled by the object or application scaling factor.</p>
+</li>
+<li>
<p>Disable the slider indicator size.</p>
-<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>
+<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 gets the state of the indicator enlargement (enabled or disabled) and then changes 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
+// Change the behavior
elm_slider_indicator_show_set(slider, !enlarge);
</pre>
- </li>
+</li>
</ul>
-
+
<h2 id="callback">Using the Slider Callbacks</h2>
-<p>The slider component emits the following signals:</p>
+<p>To receive notifications about the slider events, listen to 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>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The user stops dragging for a very short period or releases the finger or mouse. The signal is emitted a short time after the user changes the value, to avoid 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>
+<p>In all these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(slider, "changed", changed_cb, data);
}
-// Callback function for the "changed" signal
-// This callback is called when the slider value changes
+// Callback for the "changed" signal
+// Called when the slider value changes
void
changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#add">Adding a Spinner Component</a></li>
- <li><a href="#modify">Modifying the Spinner Styles</a></li>
+ <li><a href="#modify">Using the Spinner Styles</a></li>
<li><a href="#configure">Configuring the Spinner</a></li>
<li><a href="#callback">Using the Spinner Callbacks</a></li>
</ul>
<p> The spinner component increases or decreases a numeric value with the arrow buttons.</p>
-<p>The spinner component inherits from the layout component, which means that the layout component functions can also be used on the spinner component.</p>
+<p>The spinner component inherits from the layout component, which means that layout functions can be used on the spinner component.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Spinner.html">Spinner</a> API.</p>
<h2 id="add">Adding a Spinner Component</h2>
-<p>To create a spinner object, use the <span style="font-family: Courier New,Courier,monospace">elm_spinner_add()</span> function:</p>
+<p>To create a spinner component, use the <span style="font-family: Courier New,Courier,monospace">elm_spinner_add()</span> function:</p>
<pre class="prettyprint">
Evas_Object *spin, *parent;
spin = elm_spinner_add(parent);
</pre>
-<h2 id="modify" name="modify">Modifying the Spinner Styles</h2>
+<h2 id="modify" name="modify">Using the Spinner Styles</h2>
-<p>To modify the spinner styles:</p>
+<p>To use the spinner styles:</p>
<ul>
<li>
<p>Set the spinner style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. The following styles are available:</p>
<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
<li><span style="font-family: Courier New,Courier,monospace">vertical</span></li>
</ul>
-<p>To set the vertical style on the spinner object:</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">vertical</span>:</p>
<pre class="prettyprint">
elm_object_style_set(spinner, "vertical");
</pre>
</li>
<li>
-<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function:</p>
+<p>Get the current style with 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(spinner);
</pre>
<p>To configure the spinner:</p>
<ul>
<li>
-<p>Set the label format to a different value:</p>
+<p>Set the label format:</p>
<pre class="prettyprint">
elm_spinner_label_format_set(spin, "%1.2f meters");
</pre>
</li>
<li>
-<p>Determine the result of clicking the arrow buttons. In the following example, a click on an arrow increases or decreases with 2.0 units.</p>
+<p>Determine the result of clicking the arrow buttons.</p>
+<p>In the following example, a click on an arrow increases or decreases the spinner value by 2.0 units:</p>
<pre class="prettyprint">
elm_spinner_step_set(spin, 2.0);
</pre>
</li>
<li>
-<p>Activate the wrapping mode. In this mode, the spinner wraps when it reaches its minimum or maximum value.</p>
+<p>Activate the wrapping mode.</p>
+<p>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>
</pre>
</li>
<li>
-<p>Set the spinner object to vertical, and modify the change interval when the user presses the arrows long so that the value changes faster:</p>
+<p>Modify the change interval when the user long-presses the arrows to change the value faster:</p>
<pre class="prettyprint">
-elm_object_style_set(spin, "vertical");
elm_spinner_interval_set(spin, 0.1);
</pre>
</li>
<li>
-<p>Add your own text labels, if the user has to select between text values instead of numerical values. In the following example, the <span style="font-family: Courier New,Courier,monospace">spin2</span> object shows 3 numbers written in text characters.</p>
+<p>Add custom text labels, if the user has to select between text values instead of numerical values.</p>
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">spin2</span> component shows 3 numbers written in text characters:</p>
<pre class="prettyprint">Evas_Object *spin2 = elm_spinner_add(parent);
elm_spinner_min_max_set(spin2, 1, 3);
elm_spinner_special_value_add(spin2, 1, "One");
<h2 id="callback">Using the Spinner Callbacks</h2>
-<p>The spinner component emits the following signals:</p>
+<p>To receive notifications about the spinner events, listen to 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>
-<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program's language has changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The user stops dragging for a very short period or releases the finger or mouse. The signal is emitted a short time after the user changes the value, to avoid possibly expensive reactions to the value change.</li>
+<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">delay,changed</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(spin, "delay,changed", delay_changed_cb, data);
}
-// Callback function for the "delay,changed" signal
-// This callback is called a short time after the spinner value changes
+// Callback for the "delay,changed" signal
+// Called a short time after the spinner value changes
void
delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
{
<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="#items">Managing Toolbar Items</a></li>
<li><a href="#callback">Using the Toolbar Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">navigationbar</span>:</p>
<pre class="prettyprint">
elm_object_style_set(toolbar, "navigationbar");
</pre>
<h2 id="configure">Configuring the Toolbar</h2>
-<p>The toolbar displays its items in one of the following options.</p>
+<p>The toolbar has various options for shrinking its content:</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_MENU</span>: The toolbar creates a button to popup hidden items.</li>
</ul>
-<p>In the following example, the toolbar is set to <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>.</p>
+<p>To set the shrinking mode:</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>
+<p>By default, the toolbar displays items homogeneously, with long label items occupying a lot of space. To avoid that, 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 2 items and choose the associated icon, label, and function to call when the item is clicked.</p>
+<h2 id="items">Managing Toolbar Items</h2>
+
+<p>To manage the items:</p>
+<ul>
+<li>You can append items to the toolbar using the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function.
+<p>To add 2 items and define the associated icon, label, and function to call when the item is clicked:</p>
<pre class="prettyprint">
{
Elm_Object_Item *home_it, *help_it;
dlog_print(DLOG_INFO, LOG_TAG, "Help item clicked \n");
}
</pre>
-
-<p>An item can be disabled. The following example shows 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>
+</li>
+<li>You can disable an item in the toobar. A disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out).
+<p>To disable an item:</p>
<pre class="prettyprint">
elm_object_item_disabled_set(help_it, EINA_TRUE);
-</pre>
+</pre></li>
-<h2 id="states">Adding Items with States</h2>
-<p>Items have 2 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 2 states to the help item with the same icon but 2 different labels.</p>
+<li>You can define 2 or more states for an item. Each state has its own icon, label, and function to call when an item is clicked.
+<p>To create 2 states to the an item with the same icon but 2 different labels:</p>
<pre class="prettyprint">
elm_toolbar_item_state_add(help_it, "help", "Help state 1",
_help_item_pressed_cb, NULL);
elm_toolbar_item_state_add(help_it, "help", "Help state 2",
_help_item_pressed_cb, NULL);
-</pre>
-<p>It is possible to cycle through the states of the help item by using the following code.</p>
+</pre></li>
+
+<li>You can cycle through the item states to set the state you want:
<pre class="prettyprint">
elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
-</pre>
+</pre></li>
+</ul>
<h2 id="callback">Using the Toolbar Callbacks</h2>
-<p>The toolbar component emits the following signals:</p>
+<p>To receive notifications about the toolbar events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The toolbar item is double-clicked and 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 toolbar item is double-clicked. <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>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The toolbar item is double-clicked and selected.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is an <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span> object.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The toolbar item is double-clicked.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is an <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span> object.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The toolbar is pressed for a certain amount of time.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is an <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span> object.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,focused</span>: The item is highlighted.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is an <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span> object.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">item,unfocused</span>: The highlight is removed from the item.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is an <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span> object.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The toolbar scrolls.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The toolbar scrolling animation starts.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The toolbar scrolling animation stops.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: The user starts dragging the toolbar.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: The user stops dragging the toolbar.
+<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></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>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(toolbar, "clicked", clicked_cb, data);
}
-// Callback function for the "clicked" signal
-// This callback is called when a toolbar item is clicked
+// Callback for the "clicked" signal
+// Called when a toolbar item is clicked
void
clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>
+ <li><a href="#styles">Using the Tooltip Styles</a></li>
<li><a href="#configure">Configuring the Tooltip</a></li>
- <li><a href="#styles">Using the Tooltip Styles</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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. It provides tips or information about the parent object.</p>
+<p>The tooltip component is a smart object that shows content in a frame when the mouse hovers over the parent object. It provides tips or information about the parent object.</p>
-<p>A tooltip component is not a UI component as such, so it does not emit signals. There are no registered callbacks for it.</p>
+<p>A tooltip component is not a UI component as such, so it does not emit signals.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Tooltips.html">Tooltips</a> API.</p>
<p class="figure">Figure: Tooltip component</p>
<p align="center"><img alt="Tooltip component" src="../../images/tooltip.png" /></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>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">You cannot create a tooltip component 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 the tooltip.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p>To activate the tooltip on a parent object:</p>
<ol>
-<li>Set a tooltip text to the parent object:
+<li>Set a tooltip text to the parent object using the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_text_set()</span> function.
+<p>To set a tooltip text to a button parent:</p>
<pre class="prettyprint">
Evas_Object *parent = elm_button_add(obj);
elm_object_text_set(parent, "Parent");
elm_object_tooltip_text_set(parent, "The tooltip text";
</pre>
-<p>You can also set a content to the parent object.</p>
+<p>You can also set content to the parent object using the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_content_cb_set()</span> function:</p>
+<ul><li>
+<p>The second parameter defines a callback which is triggered each time the tooltip is shown. Use the callback to create the content to be shown in the tooltip. The callback returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p></li>
+<li>
+<p>The fourth parameter defines a callback which is triggered when the tooltip disappears. Use the callback to delete the previously allocated <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p></li></ul>
+
<pre class="prettyprint">
{
elm_object_tooltip_content_cb_set(parent, tooltip_content_cb, data, tooltip_content_del_cb);
}
Evas_Object*
-tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
+tooltip_content_cb(void *data, Evas_Object *obj, Evas_Object *tooltip)
{
// Create the tooltip content
}
// 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 shown. 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>
</li>
<li>
-<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>
+
+<p>After you have set the tooltip text or content, you can manually hide or show the tooltip:</p>
<pre class="prettyprint">
+// Hide
elm_object_tooltip_hide(parent);
+// Show
elm_object_tooltip_show(parent);
</pre>
</li>
<li>
-<p>Remove the tooltip from the parent object when it is not needed.</p>
+<p>When no longer needed, remove the tooltip from the parent object:</p>
<pre class="prettyprint">
elm_object_tooltip_unset(parent);
</pre>
<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>
+ <td class="note">If content was set into the tooltip object, unsetting the tooltip calls the callback provided as the fourth parameter of the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_content_cb_set()</span> function. The callback is used to notify the application that the tooltip can no longer be used.</td>
</tr>
</tbody>
</table>
</li>
</ol>
-<h2 id="configure">Configuring the Tooltip</h2>
-
-<p>The window mode allows the tooltip to expand beyond its parent window canvas. It is limited only by the size of the display.</p>
-<pre class="prettyprint">
-elm_object_tooltip_window_mode_set(parent, EINA_TRUE);
-elm_object_tooltip_window_mode_get(parent);
-</pre>
<h2 id="styles">Using the Tooltip Styles</h2>
-<p>The following styles are available for the tooltip:</p>
+<p>The tooltip 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">transparent</span></li></ul>
-<p>To set the transparent style:</p>
+<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">transparent</span>:</p>
<pre class="prettyprint">
elm_object_tooltip_style_set(parent, "transparent");
</pre>
char *style = elm_object_tooltip_style_get(parent);
</pre>
+<h2 id="configure">Configuring the Tooltip</h2>
+
+<p>You can activate the window mode for the tooltip with the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_window_mode_set()</span> function.</p>
+<p>The window mode allows the tooltip to expand beyond its parent window canvas. It is limited only by the size of the display.</p>
+<pre class="prettyprint">
+elm_object_tooltip_window_mode_set(parent, EINA_TRUE);
+elm_object_tooltip_window_mode_get(parent);
+</pre>
+
<table class="note">
<tbody>
<tr>
<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 the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function so that a window resize also resizes the content inside.</p>
+<p>The win component is the root UI component that is often used in an application. It allows the developer create content in a window, and it is handled by the window manager.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Win.html">Win</a> API.</p>
elm_win_title_set(window, "Example Window");
</pre>
-<p>The first element of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function is the parent window. For example, for a dialog you want to have the main window as the parent. In this example 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>The first parameter of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function is the parent window. For example, for a dialog you want to have the main window as the parent. In this example, the parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. The second parameter (<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 the application (and all instances of the application).The final parameter defines the window type as basic.</p>
</li>
-<li>
-<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>
-
+<li><p>Create a new window with a title and a background:</p>
<pre class="prettyprint">
Evas_Object *window;
// Create a standard window
window = elm_win_util_standard_add("main", "Example Window");
</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function is a shortcut of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_win_title_set()</span> functions, creating a basic type window. In addition, it creates a standard background to the window with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
</li>
</ul>
+<p>You can add content in the window with the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function. This ensures that when the window is resized, the content inside is resized as well.</p>
+
<h2 id="close">Closing a Window</h2>
-<p>When the window is closed 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.</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>
+<p>When a window is closed outside the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred.</p>
+<p>If you enable auto deletion for the window, the window is automatically destroyed after the <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted. If auto deletion is disabled, the window is not destroyed and the program does so when required. The auto deletion is disabled by default (<span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>). To enable auto deletion:</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>
+<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 <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted.</p>
<h2 id="callback">Using the Window Callbacks</h2>
-<p>The window component emits the following signals:</p>
+<p>To receive notifications about the window events, listen to 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">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>
+<p>In all these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
}
-// Callback function for the "fullscreen" signal
-// This callback is called when the window becomes fullscreen
+// Callback for the "fullscreen" signal
+// Called when the window becomes fullscreen
void
fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
{
<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>The win component is the root UI component that is often used in an application. It allows the developer create content in a window, and it is handled by the window manager.</p>
<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Win.html">Win</a> API.</p>
<p class="figure">Figure: Win hierarchy</p>
-<p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>
+ <p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>
<h2 id="add">Adding a Window Component</h2>
elm_win_title_set(window, "Example Window");
</pre>
-<p>The first element of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function is the parent window. For example, for a dialog you want to have the main window as the parent. In this example 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>The first parameter of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function is the parent window. For example, for a dialog you want to have the main window as the parent. In this example, the parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. The second parameter (<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 the application (and all instances of the application).The final parameter defines the window type as basic.</p>
</li>
-<li>
-<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>
-
+<li><p>Create a new window with a title and a background:</p>
<pre class="prettyprint">
Evas_Object *window;
// Create a standard window
window = elm_win_util_standard_add("main", "Example Window");
</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function is a shortcut of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_win_title_set()</span> functions, creating a basic type window. In addition, it creates a standard background to the window with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
</li>
</ul>
+<p>You can add content in the window with the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function. This ensures that when the window is resized, the content inside is resized as well.</p>
+
<h2 id="close">Closing a Window</h2>
-<p>When the window is closed 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.</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>
+<p>When a window is closed outside the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred.</p>
+<p>If you enable auto deletion for the window, the window is automatically destroyed after the <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted. If auto deletion is disabled, the window is not destroyed and the program does so when required. The auto deletion is disabled by default (<span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>). To enable auto deletion:</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>
+<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 <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted.</p>
<h2 id="callback">Using the Window Callbacks</h2>
-<p>The window component emits the following signals:</p>
+
+<p>To receive notifications about the window events, listen to 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">delete,request</span>: The window deletion is requested.</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">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">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">aux,hint,allowed</span>: The window auxiliary hint is allowed.</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>
+<p>In all these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
}
-// Callback function for the "fullscreen" signal
-// This callback is called when the window becomes fullscreen
+// Callback for the "fullscreen" signal
+// Called when the window becomes fullscreen
void
fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
{
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Box</a></li>
+ <li><a href="#create">Adding a Box Component</a></li>
<li><a href="#add">Adding Objects to the Box</a></li>
<li><a href="#set">Setting the Padding</a></li>
<li><a href="#size">Handling the Element Size</a></li>
<p class="figure">Figure: Box container</p>
<p align="center"><img alt="Box container" src="../../images/box.png" /></p>
-<h2 id="create">Creating a Box</h2>
+<h2 id="create">Adding a Box Component</h2>
<p>To create a box:</p>
<ul>
<h2 id="set">Setting the Padding</h2>
-<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>
+<p>You can set the padding between the objects in a box with 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>
evas_object_show(ic);
elm_box_pack_start(vbox, ic);
</pre>
-<p>Evas is requested 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 tries to set the minimum size of this object accordingly.</p>
+<p>Evas is requested to set the size hint for the icon object with the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas tries 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);
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Conformant</a></li>
+ <li><a href="#create">Adding a Conformant Component</a></li>
<li><a href="#add">Adding Content to the Conformant</a></li>
- <li><a href="#signal">Listening to Signals</a></li>
+ <li><a href="#signal">Using the Conformant Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<p align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
-<h2 id="create">Creating a Conformant</h2>
+<h2 id="create">Adding a Conformant Component</h2>
<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
<pre class="prettyprint">
elm_object_content_set(conformant, main_view);
</pre>
-<h2 id="signal">Listening to Signals</h2>
+<h2 id="signal">Using the Conformant Callbacks</h2>
-<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
+<p>To receive notifications about the conformant events, listen to the following signals:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">virtualkeypad,state,on</span>: The virtual keyboard has been switched on.</li>
<li><span style="font-family: Courier New,Courier,monospace">virtualkeypad,state,off</span>: The virtual keyboard has been switched off.</li>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Grid</a></li>
+ <li><a href="#create">Adding a Grid Component</a></li>
<li><a href="#add">Adding Items to the Grid</a></li>
<li><a href="#change">Changing the Position and Size</a></li>
<li><a href="#clear">Clearing the Grid</a></li>
<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>
-<h2 id="create">Creating a Grid</h2>
+<h2 id="create">Adding a Grid Component</h2>
<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;
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Layout</a></li>
+ <li><a href="#create">Adding a Layout Component</a></li>
<li><a href="#add">Adding Objects to the Layout</a></li>
<li><a href="#theme">Using Layout Themes</a></li>
<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>
-<h2 id="create" name="create">Creating a Layout</h2>
+<h2 id="create" name="create">Adding a Layout Component</h2>
<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">
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Mapbuf</a></li>
+ <li><a href="#create">Adding a Mapbuf Component</a></li>
<li><a href="#add">Adding Content to the Mapbuf</a></li>
<li><a href="#active">Activating the Mapbuf</a></li>
</ul>
<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 is faster than frequently moving the content object.</p>
-<p>The mapbuf component inherits all the functions of the container class.</p>
+<p>The mapbuf component inherits from the container component, which means that container functions can be used on the mapbuf component. The mapbuf component emits no signals.</p>
<p class="figure">Figure: Mapbuf hierarchy</p>
<p align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
-<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
-
-<h2 id="create">Creating a Mapbuf</h2>
+<h2 id="create">Adding a Mapbuf Component</h2>
<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">
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Naviframe</a></li>
+ <li><a href="#create">Adding a Naviframe Component</a></li>
<li><a href="#add_view">Adding and Deleting Views</a></li>
<li><a href="#add_content">Adding Fixed Content</a></li>
- <li><a href="#signal">Listening to Signals</a></li>
+ <li><a href="#signal">Using the Naviframe Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>
-<h2 id="create">Creating a Naviframe</h2>
+<h2 id="create">Adding a Naviframe Component</h2>
<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
<pre class="prettyprint">
<li><span style="font-family: Courier New,Courier,monospace">subtitle</span>: Sets the subtitle label in the title area of the current view.</li>
</ul>
-<h2 id="signal">Listening to Signals</h2>
+<h2 id="signal">Using the Naviframe Callbacks</h2>
<p>To receive notifications about the naviframe events, listen to the following signals:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">transition,finished</span>: The transition has finished changing the view.</li>
-<li><span style="font-family: Courier New,Courier,monospace">title,transition,finished</span>: The title area transition has finished changing the state of the title.</li>
-<li><span style="font-family: Courier New,Courier,monospace">title,clicked</span>: The user has clicked the title area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">title,transition,finished</span>: The title area transition has finished changing the state of the title.</li>
+<li><span style="font-family: Courier New,Courier,monospace">title,clicked</span>: The title area is clicked.</li>
</ul>
<table class="note">
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating Panes</a></li>
+ <li><a href="#create">Adding a Panes Component</a></li>
<li><a href="#add">Adding Content to the Panes</a></li>
<li><a href="#set">Setting Panes Options</a></li>
- <li><a href="#signal">Listening to Signals</a></li>
+ <li><a href="#signal">Using the Panes Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<p class="figure">Figure: Panes component</p>
<p align="center"><img alt="Panes component" src="../../images/panes.png" /></p>
-<h2 id="create">Creating Panes</h2>
+<h2 id="create">Adding a Panes Component</h2>
<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">
<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>
-<h2 id="signal">Listening to Signals</h2>
+<h2 id="signal">Using the Panes Callbacks</h2>
<p>To receive notifications about the panes events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">press</span>: The panes component has been pressed (but the press has not been released yet).</li>
-<li><span style="font-family: Courier New,Courier,monospace">unpress</span>: The press has been released.</li>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The panes component has been clicked.</li>
-<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The panes component has been double-clicked.</li>
+<li><span style="font-family: Courier New,Courier,monospace">press</span>: The panes component is pressed (but the press has not been released yet).</li>
+<li><span style="font-family: Courier New,Courier,monospace">unpress</span>: The press is released.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The panes component is clicked.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The panes component is double-clicked.</li>
</ul>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Scroller</a></li>
+ <li><a href="#create">Adding a Scroller Component</a></li>
<li><a href="#add">Adding Objects to the Scroller</a></li>
<li><a href="#manage">Managing the Properties of the Scroller</a></li>
- <li><a href="#signal">Listening to Signals</a></li>
+ <li><a href="#signal">Using the Scroller Callbacks</a></li>
<li><a href="#slideshow">Creating a Picture Slideshow</a></li>
</ul>
<h1>Scroller</h1>
<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that you can use a scroll bar or finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller always has a default minimum size that is not limited by its contents.</p>
-<p>The scroller component inherits all the functions of the <a href="container_layout_n.htm">Layout</a>.</p>
+<p>The scroller component inherits from the layout component, which means that layout functions can be used on the scroller component.</p>
-<h2 id="create">Creating a Scroller</h2>
+<h2 id="create">Adding a Scroller Component</h2>
<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
<pre class="prettyprint">
</pre>
<p>The scroller can limit the scrolling to "pages". In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
-<h2 id="signal">Listening to Signals</h2>
+<h2 id="signal">Using the Scroller Callbacks</h2>
<p>To receive notifications about the scroller events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The left edge of the content has been reached.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The right edge of the content has been reached.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The top edge of the content has been reached.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The bottom edge of the content has been reached.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content has been scrolled (moved).</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The left edge of the content is reached.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The right edge of the content is reached.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The top edge of the content is reached.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The bottom edge of the content is reached.</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,anim,start</span>: The scrolling animation has started.</li>
<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation has stopped.</li>
<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents has started.</li>
<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents has stopped.</li>
-<li><span style="font-family: Courier New,Courier,monospace">vbar,drag</span>: The vertical scroll bar has been dragged.</li>
-<li><span style="font-family: Courier New,Courier,monospace">vbar,press</span>: The vertical scroll bar has been pressed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">vbar,unpress</span>: The vertical scroll bar has been unpressed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">hbar,drag</span>: The horizontal scroll bar has been dragged.</li>
-<li><span style="font-family: Courier New,Courier,monospace">hbar,press</span>: The horizontal scroll bar has been pressed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">hbar,unpress</span>: The horizontal scroll bar has been unpressed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">vbar,drag</span>: The vertical scroll bar is dragged.</li>
+<li><span style="font-family: Courier New,Courier,monospace">vbar,press</span>: The vertical scroll bar is pressed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">vbar,unpress</span>: The vertical scroll bar is unpressed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">hbar,drag</span>: The horizontal scroll bar is dragged.</li>
+<li><span style="font-family: Courier New,Courier,monospace">hbar,press</span>: The horizontal scroll bar is pressed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">hbar,unpress</span>: The horizontal scroll bar is unpressed.</li>
<li><span style="font-family: Courier New,Courier,monospace">scroll,page,changed</span>: The visible page has changed.</li>
</ul>
-<p>For example, to be informed when the user begins scrolling the image, use the following code:</p>
+<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(scroller, "scroll,drag,start", _scroll_start_cb, NULL);
-// Callback function for the "scroll,drag,start" signal
-// This callback is called when the user begins scrolling the image
+// Callback for the "scroll,drag,start" signal
+// Called when the user begins scrolling the image
void
_scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
{
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create">Creating a Table</a></li>
+ <li><a href="#create">Adding a Table Component</a></li>
<li><a href="#add">Adding Items to the Table</a></li>
<li><a href="#manage">Managing the Items</a></li>
<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>
-<h2 id="create">Creating a Table</h2>
+<h2 id="create">Adding a Table Component</h2>
<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
<pre class="prettyprint">
<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="#position">Using 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>
+ <li><a href="#frame">Using Frametime</a></li>
+ <li><a href="#custom">Setting a Custom Timer</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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;"><Ecore.h></span> file. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></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>To use Ecore animators, you must include the <span style="font-family: Courier New,Courier,monospace;"><Ecore.h></span> header file in the application. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></span> header file in the application. You must 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>
+<p>In the following example, a linear transition moves <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> from position (0,0) to position (100,100) in 2 seconds.</p>
<pre class="prettyprint">
static Eina_Bool
_do_animation(void *data, double pos)
{
evas_object_move(data, 100 * pos, 100 * pos);
- // Do some more animating...
+ // 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>Most of the time, you 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>
+<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. The first parameter is the duration of the animation in seconds. The duration is not affected by frame rate. The second parameter is the callback function that performs the animation, and the third parameter is the data passed to the callback function. This is usually the Evas object to animate.</p>
<table class="note">
<tbody>
ecore_animator_timeline_add(8, _my_animation, my_evas_object);
</pre>
-<h2 id="position" name="position">Position Mappings</h2>
+<h2 id="position" name="position">Using 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>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 the 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
+<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>
+ <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
+<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>
+ <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
+<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>
+ <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
+<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>
+ <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
+<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>
+ <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</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
+<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>
+ <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</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
+<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>
+ <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</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
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: Start at gradient * v1, interpolated using the power of the v2 curve
<ul>
- <li>v1: multiplication factor for gradient</li>
- <li>v2: curve value</li>
+ <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 "drop" like a ball bouncing to the ground at 1.0, and bounce v2 times, with a decay factor of v1
+<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 v2 times, with a decay factor of v1
<ul>
- <li>v1: bounce decay factor</li>
- <li>v2: number of bounces</li>
+ <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 "wobble" like a spring until rest position at 1.0, and wobble v2 times, with a decay factor of v1
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: Start at 0.0, then wobble 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>
+ <li>v1: Wobble decay factor</li>
+ <li>v2: Number of wobbles</li>
</ul>
</li>
</ul>
-<p class="figure">Figure: Position mappings</p>
+<p id="position_mappings" 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>
+<p>To create a non-linear animation, map the position value to one of several curves and mappings using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map()</span> function. The first parameter is the current position value, which ranges from 0.0 to 1.0. The second parameter is the position mapping you want to apply. The third parameter is the first parameter (v1) to pass to the position mapping, and the fourth parameter is the second parameter (v2) to pass to the position mapping.</p>
<table class="note">
<tbody>
<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>
+<td class="note">The v1 and v2 parameters 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
+<pre class="prettyprint">
+static Eina_Bool
_my_animation_callback(void *data, double pos)
{
Evas_Object *obj = data; // Get the target object
return EINA_TRUE;
}
-ecore_animator_timeline_add(5, _my_animation_callback, my_evas_object);</pre>
+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>
+<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. The first parameter is the callback function that performs the animation. The second parameter is the data passed to the callback function. This is usually the Evas object to animate.</p>
+<p>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 the frame rate. Using the frame rate as a 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>
<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
+<pre class="prettyprint">
+static Eina_Bool
_slide_back_and_forth(void *data)
{
typedef enum {LEFT, RIGHT} direction_t; // Direction datatype
{
// Declarations
- // Ecore Evas init
+ // Initialize Ecore Evas
// Draw Evas objects
<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>You can pause and resume Ecore animations.</p>
+<ul>
+<li>To pause a running animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function. The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to pause.
+</li>
+<li>
+<p>To resume the paused animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function. The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to resume.</p>
+</li>
+</ul>
<p>The following example pauses a transition after 5 seconds and resumes it after 5 more seconds:</p>
<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>When you create an animation that does not have a timeout, you 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 the 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>The argument is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> whose memory allocation to free up.</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. The parameter 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)
- 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 "frametime" 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>
+<pre class="prettyprint">
+if (animator != NULL)
+ ecore_animator_del(animator);
+</pre>
-<p>To tweak performance, you can change the frametime value:</p>
+<h2 id="frame" name="frame">Using Frametime</h2>
-<pre class="prettyprint">ecore_animator_frametime_set(double frametime)</pre>
+<p>In most cases, you want to use the default timer <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_TIMER</span>. This timer ticks every "frametime" 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>The argument is the new frametime value.</p>
+<p>To tweak performance, change the frametime value using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set()</span> function. The parameter is the new frametime value.</p>
<table class="note">
<tbody>
<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>
+<td class="note">Too small a value can cause performance issues, whereas too high a value can cause the 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 get the current frametime value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</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>
+<h2 id="custom" name="custom">Setting a Custom Timer</h2>
-<pre class="prettyprint">ecore_animator_custom_source_tick_begin_callback_set(Ecore_Cb func, const void *data)</pre>
+<p>You can specify a custom timer to match the animation to third-party events. For example, the filling speed of a progress bar mainly depends 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>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>To set up a custom timer:</p>
+<ol>
+<li>
+<p>To use a custom timer, set <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_CUSTOM</span> as the timer source. Drive the timer based on an input tick source (such as another application using the IPC or a vertical blanking interrupt) with the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_custom_source_tick_begin_callback_set()</span> function. The first parameter is the callback function to call on the tick start. The second parameter is the data to pass to the callback function.</p>
+</li>
+<li>
+<p>To set the end callback, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_custom_source_tick_end_callback_set()</span> function. The first parameter is the callback function to call on the tick end. The second parameter is the data to pass to the callback function to set the functions that is called to start and stop the ticking source.</p>
+</li>
+<li>
+<p>Trigger a tick over one frame using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_custom_tick()</span> function.</p>
-<p>The following example supposes a progress bar that will be refreshed every time some progress occurs:</p>
+<p>The following example supposes a progress bar that is refreshed every time some progress occurs:</p>
-<pre class="prettyprint">ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
-void _on_progress_update()
+<pre class="prettyprint">
+ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
+void
+_on_progress_update()
{
// Called when some progress occurs
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>
+</li>
+<li>
+<p>To get the current animator source, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_get()</span> function.</p>
+ </li>
+ </ol>
<table class="note">
<tbody>
<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="#Actions">Using Actions</a></li>
+ <li><a href="#Transitions">Using 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="#Signals">Handling Signals</a></li>
<li><a href="#Rotate">Rotating with Edje</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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>
+<p>The Edje animations are based on a very simple principle: going from one state to another. To animate something with Edje, you must define 2 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 "rectangle" 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>
+<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 5 seconds.</p>
+<p>To animate a rectangle:</p>
+
+<ol>
+<li>
+<p>Define a <span style="font-family: Courier New,Courier,monospace;">part</span> called <span style="font-family: Courier New,Courier,monospace;">"rectangle"</span> with the <span style="font-family: Courier New,Courier,monospace;">type RECT:</span> this part has 2 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>
+<p>The <span style="font-family: Courier New,Courier,monospace;">"rectangle"</span> part has 2 descriptions that share the same name, but have a different "version".</p>
+
+<pre class="prettyprint">
+part
+{
+ name: "rectangle";
+ type: RECT;
+ description
+ {
+ state: "default" 0.0;
+ }
+ description
+ {
+ state: "default" 0.5;
+ }
+}
+</pre>
+</li>
+<li>
+<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. In this example, the program is called when the signal load is received from any source.</p>
+
+<pre class="prettyprint">
+program
+{
+ name: "animation,state1";
+ source: "";
+ signal: "load";
+}
+</pre>
+</li>
+<li>
+<p>An action is performed upon the signal reception. In this example, the state is changed.</p>
<pre class="prettyprint">
+action: STATE_SET "default" 0.5;
+</pre>
+</li>
+<li>
+<p>The program has a target, in this case it is the <span style="font-family: Courier New,Courier,monospace;">"rectangle"</span>.</p>
+
+<pre class="prettyprint">
+target: "rectangle";
+</pre>
+</li>
+<li>
+<p>The program uses a transition to perform the action.</p>
+
+<pre class="prettyprint">
+transition: LINEAR 5;
+</pre>
+</li>
+</ol>
+<p>The following code snippet shows the complete code for this example.</p>
+<pre class="prettyprint">
collections
{
group
}
</pre>
-<p>The "rectangle" part has two descriptions that share the same name, but have a different "version".</p>
-<pre class="prettyprint">
-part
-{
- name: "rectangle";
- type: RECT;
- description
- {
- state: "default" 0.0;
- }
- description
- {
- state: "default" 0.5;
- }
-}
-</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
-{
- name: "animation,state1";
- source: "";
- signal: "load";
-}
-</pre>
-
-<p>An action is performed upon the signal reception. In this example, the state is changed.</p>
-
-<pre class="prettyprint">
-action: STATE_SET "default" 0.5;
-</pre>
-
-<p>The program has a target, here the "rectangle".</p>
-
-<pre class="prettyprint">
-target: "rectangle";
-</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">Using Actions</h2>
-<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 "target".</p>
+<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 can also send signals with <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>.</p>
+<ul>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action changes the state of the <span style="font-family: Courier New,Courier,monospace;">target</span>.</p>
-<p>In the following example, the state of the part named "image" changes to "default" "0.0".</p>
+<p>In the following example, the state of the part named <span style="font-family: Courier New,Courier,monospace;">"image"</span> changes to <span style="font-family: Courier New,Courier,monospace;">"default" "0.0"</span>.</p>
<pre class="prettyprint">
program
target: "image";
}
</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> stops the program specified by "target".</p>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> stops the program specified by <span style="font-family: Courier New,Courier,monospace;">target</span>.</p>
<pre class="prettyprint">
program
}
</pre>
-<p>The previous example stops the program defined as "target" 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 previous example stops the program defined as <span style="font-family: Courier New,Courier,monospace;">target</span> 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>
+</li>
+<li>
<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> "start" 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> "start" when the mouse is pressed in the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part.</p>
+<p>The following example emits a signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> <span style="font-family: Courier New,Courier,monospace;">"start"</span> 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> <span style="font-family: Courier New,Courier,monospace;">"start"</span> when the mouse is pressed in the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part.</p>
<pre class="prettyprint">
program
action: SIGNAL_EMIT "frame_move" "start";
}
</pre>
+</li>
+</ul>
-<h2 id="Transitions" name="Transitions">Transitions</h2>
+<h2 id="Transitions" name="Transitions">Using 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:
+<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>
+ <li>Duration</li>
+ <li>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>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 can 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:
+<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>
+ <li>Duration</li>
+ <li>How much the bounce decays, with 0.0 giving linear decay per bounce, and higher values giving more decay</li>
+ <li>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:
+<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>
+ <li>Duration</li>
+ <li>Decay, with the level exceeding 1.0 on the outer swings</li>
+ <li>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>
+<p>There are <a href="ecore_animation_n.htm#position_mappings">graphical representations of these effects</a> in Ecore Animations.</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>To chain Edje programs:</p>
+<ol>
+<li>
+<p>To define a couple of Edje programs and chain them, 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>
+</li>
+<li>
<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: "animation,state0";
</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>
+</li>
+<li>
+<p>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, 6 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
transition: BOUNCE 5 1.8 6;
}
</pre>
+</li>
+</ol>
-<h2 id="Playing_Signals" name="Playing_Signals">Playing on Signals</h2>
+<h2 id="Signals" name="Signals">Handling Signals</h2>
<p>The programs start when they receive a signal from a source. Edje handles many kind of signals, including mouse events.</p>
<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>
+<td class="note">To show the signals, use the <span style="font-family: Courier New,Courier,monospace;">edje_player -p myfile.edj</span> command.</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>
+<p>To create this transition:</p>
+<ol>
+<li>
+<p>Define a new state. This state changes the color and the position of the rectangle.</p>
<pre class="prettyprint">
// To be placed in the "part" definition
color: 255 0 0 255;
}
</pre>
-
-<p>The program is as follows:</p>
+</li>
+<li>
+<p>Create the program to start when the rectangle is left clicked:</p>
<pre class="prettyprint">
program
transition: SIN 2;
}
</pre>
-
-<p>This starts when the rectangle is left clicked.</p>
-
+</li>
+<li>
<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">
<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>
+<td class="note">To find a complete example, use
the <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit()</span> function in <a href="menu_tutorial_mn.htm">Creating Mobile Menus</a>.</td>
</tr>
</tbody>
</table>
+</li>
+</ol>
+
<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>
+<p>The Edje library allows you to rotate objects, using the <span style="font-family: Courier New,Courier,monospace;">map</span> statement.</p>
+<p>To rotate with Edje:</p>
+<ol>
+<li>
+<p>To rotate the blue rectangle on a right click, define a new rotate state. To enable the <span style="font-family: Courier New,Courier,monospace;">map</span> on the object, add a <span style="font-family: Courier New,Courier,monospace;">map</span> part to your default state.</p>
<pre class="prettyprint">
map
</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><span style="font-family: Courier New,Courier,monospace;">on: 1;</span>:
+<p>Enables the map on the object.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">perspective_on: 1;</span>:
+<p>Enables the perspective when rotating, even without a perspective point object.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">smooth: 1;</span>:
+<p>Enables a smooth map rendering.</p></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>
+</li>
+<li>
+<p>To add a new rotate state with a rotation around any axis:</p>
<pre class="prettyprint">
description
</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° to 120°.</p>
-
-<p>To set a program to run the rotate state, do the following.</p>
+</li>
+<li>
+<p>To set a program to run the rotate state on a right click on the rectangle object:</p>
<pre class="prettyprint">
program
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>
+</li>
+</ol>
+<p>The following code snippet shows the complete code of this example.</p>
<pre class="prettyprint">
collections
<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>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>
<li>In the Tizen IDE, go to <strong>Tizen Native project > UI application > 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
+<pre class="prettyprint">
+color_classes
{
color_class
{
}
}
}
-}</pre>
+}
+</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>
+<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 "C"</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
+<pre class="prettyprint">
+static void
btn1_cb(void *data, Evas_Object *obj, void *event_info)
{
edje_color_class_set("A", rand()%255, rand()%255, rand()%255, 255,
static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
// Show the window
evas_object_show(ad->win);
-}</pre>
+}
+</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">"A" </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">"B"</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>
+<p>The following figure shows the Edje colorclass application.</p>
+<p align="center"><img alt="Edje colorclass application" src="../../images/edje_color.png" /></p>
+</li>
</ol>
<pre class="prettyprint">static void
create_base_gui(appdata_s *ad)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
<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>
+<p>Edje provides the functionality to manipulate the EDJ files.</p>
+<ol>
+<li>Get the list of styles from EDJ file:
<pre class="prettyprint">// Get the collection list from the EDJ file
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
ad->list = edje_file_collection_list(edj_path);</pre>
+</li>
+<li>
+<p>Add the item in the genlist to display the list:</p>
+
+<pre class="prettyprint">EINA_LIST_FOREACH(ad->list, l, str)
+{
+ elm_genlist_item_append(ad->genlist, ad->itc, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
+}</pre>
+</li>
+<li>
<p>When you do not use the collection list, delete it:</p>
<pre class="prettyprint">static void
</tr>
</tbody>
</table>
-
-<p>Add the item in the genlist to display the list:</p>
-
-<pre class="prettyprint">EINA_LIST_FOREACH(ad->list, l, str)
-{
- elm_genlist_item_append(ad->genlist, ad->itc, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
-}</pre>
-
+</li>
+</ol>
<h2 id="create" name="create">Creating an Edje Object</h2>
appdata_s *ad = data;
Elm_Object_Item *eoi = NULL;
const char *str;
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
Evas_Object *edje_object;
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
<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>
+<p>To create a simple application with a menu and separate screens for each Edje Animation function:</p>
<ol>
<li>
<h2 id="logic" name="logic">Creating the Application Logic</h2>
+<p>To create the application logic:</p>
<ol>
<li>Create new project named <span style="font-family: Courier New,Courier,monospace">test</span>.</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[] =
{
- {"test1", _test1_func },
- {"test2", _test2_func },
+ {"test1", _test1_func},
+ {"test2", _test2_func},
{NULL, NULL } // Do not delete
};</pre>
char *res_path = app_get_resource_path();
if (res_path)
{
- snprintf(edj_path_out, edj_path_max, "%s%s", res_path, edj_file_in);
- free(res_path);
+ snprintf(edj_path_out, edj_path_max, "%s%s", res_path, edj_file_in);
+ free(res_path);
}
}
Evas_Object **layout_out,
Evas_Object **animation_out)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
<p>The spinner displays the current frame time value and enables changing it. Extreme values (> 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>
{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>
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_freeze()</span> and <span style="font-family: Courier New,Courier,monospace">edje_thaw()</span> functions freeze or thaw all objects in the entire application.</p>
</li>
<li>Enable and disable the animation.
<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>
+ <li><a href="#signals">Emitting Signals</a></li>
+ <li><a href="#messages">Sending Messages</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>
+ <h2 id="signals" name="signals">Emitting 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>
+ <p>Using signals in the EDC file is simple. To use signals:</p>
+<ol>
+<li>Create a program and set the signal name to the <span style="font-family: Courier New,Courier,monospace;">signal</span> attribute.
<pre class="prettyprint">
group
}
}
</pre>
-
- <h3 id="emit" name="emit">Emitting Signals from the C Code</h3>
-
+</li>
+<li id="emit">Emit signals from the C code:
+<ol type="a">
+<li>
<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)
{
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
// Window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
}
</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>
-
+</li>
+<li>
<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
edje_object_signal_emit(ad->edje_object, "to,state,default,0", "");
}
</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>
+</li>
+</ol>
+</li>
+</ol>
-
-<h2 id="messages" name="messages">Messages</h2>
+<h2 id="messages" name="messages">Sending Messages</h2>
<p>Edje messages are used for communication between code and a given Edje object'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>
+<p>To use messages:</p>
+<ol>
+<li>Add the parts.
+<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
}
}
}
-</pre>
-
- <p>Add the sliders:</p>
+</pre>
+</li>
+<li>
+<p>Add the sliders:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
ad->slider_ver = elm_slider_add(ad->win);
edje_object_part_swallow(ad->edje_object, "swallow.slider_ver", ad->slider_ver);
elm_slider_horizontal_set(ad->slider_ver, EINA_FALSE);
evas_object_smart_callback_add(ad->slider_hor, "changed", _slider_changed, ad);
</pre>
- <p>The following figure displays the result.</p>
- <p class="figure">Figure: Sliders added</p>
+<p>The following figure displays the result.</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>
+</li>
+<li>
+<p>To handle the message in the Style, add the following script to the EDC file:</p>
<pre class="prettyprint">
group
}
}
</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">
+<p>This script is called when an incoming message is detected.</p>
+</li>
+<li id="send_message">Send messages:
+<ol type="a">
+<li><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)
{
<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">
+<pre class="prettyprint">
program
{
signal: "drag";
}
}
</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>
+</li>
+<li>
+<p>Add a message handler in the C code:</p>
- <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">
+<pre class="prettyprint">
edje_object_message_handler_set(ad->edje_object, _message_handle, ad);
</pre>
-
- <p>Add a callback:</p>
+</li>
+<li>
+<p>Add a callback:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
static void
_message_handle(void *data, Evas_Object *obj, Edje_Message_Type type,
int id, void *msg)
if (id == 3) elm_slider_value_set(ad->slider_ver, m->val);
}
</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>
<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>
+<p>Edje Perspective can be used in all Edje objects to create and configure perspective objects and to set the perspective 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>
</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>
+<p>Create the application. Create a basic window component that is going to be loaded and created in the main starting function:</p>
<pre class="prettyprint">
// Window
evas_object_show(ad->edje_obj);
elm_object_part_content_set(ad->layout, "swallow", ad->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>
<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)
+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>
<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>
evas_object_show(ad->win);
</pre>
-<p class="figure">Figure: Main screen</p>
<p align="center"><img alt="Figure: Main screen" src="../../images/perspective_screen.png" /> </p>
</li>
}
</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>
+<p align="center"><img alt="Figure: Moving process" src="../../images/moving1.png" /> <img alt="Figure: Moving process" src="../../images/moving2.png" /></p>
</li>
<li>
}
</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>
<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>
+ <li><a href="#scales">Setting Personal, Global, and Base Scales</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>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>
<ol>
<li>
-<p>To demonstrate Edje scale usability, set up 2 groups. The first group contains only one scalable part.</p>
+<p>To demonstrate Edje scale usability, set up 2 groups. The first group contains only 1 scalable part.</p>
<pre class="prettyprint">group
{
}
}</pre>
-<p class="figure">Figure: First scalable group</p>
+<p>The following figure shows the 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's global scale.</p>
-<p>The other group is used for showing usability of the <span style="font-family: Courier New,Courier,monospace">edje_object_scale()</span> 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>The second group is used for showing usability of the <span style="font-family: Courier New,Courier,monospace">edje_object_scale()</span> 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>
-
-<p class="figure">Figure: Second scalable group</p>
+<p>The following figure shows the 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>
+<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
{
}
</pre>
-<p class="figure">Figure: Main application layout</p>
+<p>The following figure shows the 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>
<p>Create a window and get the path to the EDJ file:</p>
<pre class="prettyprint">
-ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE); elm_win_conformant_set(ad->win, EINA_TRUE);
+ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_conformant_set(ad->win, EINA_TRUE);
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
-// Path to edj group with three groups
+// Path to the edj group with 3 groups
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
</pre>
</li>
<pre class="prettyprint">
evas_object_show(ad->win);</pre>
-
-<p class="figure">Figure: Scale testing application</p>
+<p>The following figure shows the scale testing application.</p>
<p align="center"><img alt="Scale testing application" src="../../images/scale_testing_app.png" /></p>
</li>
</ol>
}</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>The following figure shows the different global values.</p>
<p align="center"><img alt="Different global scales" src="../../images/global_scales.png" /></p>
</li>
<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>The following figure shows the 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>
+<h2 id="scales" name="scales">Setting 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>
+<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>
+<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
<pre class="prettyprint">static void
_edje_object_scale_get(void *data, Evas_Object *obj, void *event_info)
{
- char title[PATH_MAX] = {0, };
+ char title[PATH_MAX] = {0,};
appdata_s *ad = data;
snprintf(title, (int)PATH_MAX, "object %.2f", edje_object_scale_get(ad->edje_object_2));
elm_object_text_set(obj, title);
static void
_edje_scale_get(void *data, Evas_Object *obj, void *event_info)
{
- char title[PATH_MAX] = {0, };
+ char title[PATH_MAX] = {0,};
snprintf(title, (int)PATH_MAX, "global %.2f", edje_scale_get());
elm_object_text_set(obj, title);
}
static void
_edje_object_base_scale_get(void *data, Evas_Object *obj, void *event_info)
{
- char title[PATH_MAX] = {0, };
+ char title[PATH_MAX] = {0,};
appdata_s *ad = data;
snprintf(title, (int)PATH_MAX, "base %.2f", edje_object_base_scale_get(ad->edje_object_2));
elm_object_text_set(obj, title);
<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>The following figure shows the scale values.</p>
<p align="center"><img alt="Scale values" src="../../images/scale_values.png" /></p>
</li>
}
}</pre>
-<p class="figure">Figure: Scale values after changing the Edje object scale</p>
+<p>The following figure shows the 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>
</tr>
</tbody>
</table>
-
-<p class="figure">Figure: Base scale</p>
+
+<p>The following figure shows the 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>
<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="#layout">Managing the 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>
<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>
-
+<p>To implement the application:</p>
<ol>
<li>Create the basic application:
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
win_back_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
elm_naviframe_item_pop(ad->navifr);
-}</pre>
+}
+</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
+<pre class="prettyprint">
+static void
app_get_resource(const char *edj_file_in, char *edj_path_out, int edj_path_max)
{
char *res_path = app_get_resource_path();
snprintf(edj_path_out, edj_path_max, "%s%s", res_path, edj_file_in);
free(res_path);
}
-}</pre>
-
+}
+</pre>
+</li>
+<li>
<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
+<pre class="prettyprint">
+static void
create_base_gui(appdata_s *ad)
{
Elm_Object_Item *eoi = NULL;
<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 *
+<pre class="prettyprint">
+static char *
_genlist_item_text_get(void *data, Evas_Object *obj, const char *part)
{
Eina_Stringshare *text_class = (Eina_Stringshare *)data;
// Show the window
evas_object_show(ad->win);
-}</pre>
+}
+</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>
<li>
<p>Load the layout:</p>
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
_create_class_list_gui(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data; // Get application's data
- char edj_path[PATH_MAX] = {0, }; // path to edc file
- Eina_List *l; // Used later
+ char edj_path[PATH_MAX] = {0,}; // Path to the edc file
+ Eina_List *l; // Used later
const char *str; // Used later
Elm_Object_Item *eoi = NULL; // Used later
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
</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>
+<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->list = edje_text_class_list();</pre>
+<pre class="prettyprint">
+ad->list = edje_text_class_list();
+</pre>
</li>
<li>
<p>Create the genlist:</p>
-<pre class="prettyprint">// Genlist
+<pre class="prettyprint">
+// Genlist
ad->itc_text_classes = elm_genlist_item_class_new();
ad->itc_text_classes->func.text_get =_genlist_item_text_get;
<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>
ad->itc_text_classes = elm_genlist_item_class_new();
ad->itc_text_classes->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
+<pre class="prettyprint">
+static void
_genlist_clicked(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
- char text_class[PATH_MAX] = {0, };
+ char text_class[PATH_MAX] = {0,};
Elm_Object_Item *eoi = NULL;
const char *str;
char *font;
edje_text_class_get(str, &font, &size);
snprintf(text_class, PATH_MAX, "%s font{%s} size{%d}", str, font, size);
elm_object_part_text_set(ad->gui1_layout, "text_view", text_class);
-}</pre>
-</li>
+}
+</pre>
-<li>
<p>Register the added callback function in the genlist:</p>
<pre class="prettyprint">
elm_naviframe_item_simple_push(ad->navifr, ad->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>
+<h2 id="layout" name="layout">Managing the 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 second screen contains 2 Edje objects 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>
+}
+</pre>
<ol>
<li>
<li>
<p>Create a view for the new screen:</p>
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
- char edj_path[PATH_MAX] = {0, };
+ char edj_path[PATH_MAX] = {0,};
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
evas_object_show(ad->edje_object_1);
elm_object_part_content_set(ad->gui2_layout, "edje.swallow.group1", ad->edje_object_1);
- // Addgroup2
+ // Add group2
ad->edje_object_2 = edje_object_add(evas_object_evas_get(ad->win));
evas_object_size_hint_weight_set(ad->edje_object_2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
edje_object_file_set(ad->edje_object_2, edj_path, "edje_example");
evas_object_show(ad->edje_object_2);
elm_object_part_content_set(ad->gui2_layout, "edje.swallow.group2", ad->edje_object_2);
- // Add spinner
+ // Add the spinner
ad->spinner = elm_spinner_add(ad->win);
evas_object_size_hint_weight_set(ad->spinner, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(ad->spinner, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_spinner_value_set(ad->spinner, 10);
elm_object_part_content_set(ad->gui2_layout, "edje.swallow.spinner", ad->spinner);
elm_naviframe_item_simple_push(ad->navifr, ad->gui2_layout);
-}</pre>
+}
+</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>
<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
+<pre class="prettyprint">
+static void
_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
{
Evas_Object *box, *button;
elm_object_part_content_set(ad->gui2_layout, "edje.swallow.buttons", box);
elm_naviframe_item_simple_push(ad->navifr, ad->gui2_layout);
-}</pre>
+}
+</pre>
</li>
<li>
<p>The callback contains functions for setting the text class globally:</p>
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
_edje_text_class_set(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
edje_text_class_set("custom_text_class", "Sans", elm_spinner_value_get(ad->spinner));
-}</pre>
+}
+</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>
+<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
+<pre class="prettyprint">
+static void
_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
{
button = elm_button_add(ad->gui2_layout);
evas_object_show(button);
evas_object_smart_callback_add(button, "clicked", _edje_object_text_class_set_2, ad);
elm_box_pack_end(box, button);
-}</pre>
+}
+</pre>
</li>
<li>
<p>Add callbacks:</p>
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
_edje_object_text_class_set_1(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
{
appdata_s *ad = data;
edje_object_text_class_set(ad->edje_object_2, "custom_text_class", "Sans", elm_spinner_value_get(ad->spinner));
-}</pre>
+}
+</pre>
</li>
<li>
<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>
+<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
+<pre class="prettyprint">
+static void
_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
{
button = elm_button_add(ad->gui2_layout);
evas_object_show(button);
evas_object_smart_callback_add(button, "clicked", _edje_object_text_class_get_2, ad);
elm_box_pack_end(box, button);
-}</pre>
+}
+</pre>
</li>
<li>
<p>Add callbacks:</p>
-<pre class="prettyprint">static void
+<pre class="prettyprint"
+>static void
_edje_object_text_class_get_1(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
char *font;
Evas_Font_Size size;
- char text_class[PATH_MAX] = {0, };
+ char text_class[PATH_MAX] = {0,};
edje_object_text_class_get(ad->edje_object_1, "custom_text_class", &font, &size);
snprintf(text_class, PATH_MAX, "font{%s} size{%d}", font, size);
appdata_s *ad = data;
char *font;
Evas_Font_Size size;
- char text_class[PATH_MAX] = {0, };
+ char text_class[PATH_MAX] = {0,};
edje_object_text_class_get(ad->edje_object_2, "custom_text_class", &font, &size);
snprintf(text_class, PATH_MAX, "font{%s} size{%d}", font, size);
edje_object_part_text_set(ad->edje_object_2, "text_example", text_class);
-}</pre>
+}
+</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>
+<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, 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>
<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 ("Tween Mode")</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="#Animation_Duration">Managing Animation Duration</a></li>
+ <li><a href="#Acceleration_Mode">Setting the Animation Acceleration Mode ("Tween Mode")</a></li>
+ <li><a href="#Animation_Repeat">Managing Animation Repeat</a></li>
+ <li><a href="#Auto_Reverse">Managing Animation Auto-reverse</a></li>
+ <li><a href="#Transitions2">Managing 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>
+ <li><a href="#Animation_Chain">Creating an Animation Chain</a></li>
+ <li><a href="#Animation_Timeline">Managing Animation Timeline</a></li>
+ <li><a href="#Custom_Transition">Creating Custom Transitions</a></li>
</ul>
<p class="toc-title">Related Info</p>
<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>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 are automatically managed: their callback functions are called for the set duration, and they are 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>To create a transition with <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, build the 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>
+<p>You now have an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that allows you to perform transitions on 1 or more objects. The transit object holds the information about the target objects and the transition effects that are used. The transit object also contains information, such as animation duration, number of repetitions, and auto-reverse. 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>To add objects to an animation:</p>
+<ul>
+<li>
<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>
+<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>
+<p>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second parameter is the Evas object to animate.</p>
<table class="note">
<tbody>
<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>
+<td class="note">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>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>
+</li>
+<li>
+<p>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 get a list of all the objects that are subject to the transition.</p>
+</li>
+<li>
+<p>To remove objects from the transition:</p>
+<pre class="prettyprint">
+elm_transit_object_remove(Elm_Transit *transit, Evas_Object *obj)
+</pre>
-<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>
+<p>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second parameter is the Evas object to remove from the transition.</p>
<table class="note">
<tbody>
<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>
+<td class="note">After you have added at least one Evas object to your transition, if the list of objects gets emptied somehow, either because the transition has been terminated or all objects have been deleted, the transition is automatically deleted. Otherwise, you 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 stops.</td>
</tr>
</tbody>
</table>
+</li>
+</ul>
<h2 id="Add_Image" name="Add_Image">Adding Images to an Animation</h2>
+<p>To add images to an animation:</p>
+<ol>
+<li>
<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>
+<p>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second parameter is a list of the image paths.</p>
<table class="note">
<tbody>
<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>
+<td class="note">This list and its contents are 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>
-
+</li>
+<li>
<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];
+<pre class="prettyprint">
+char buf[PATH_MAX];
Eina_List *images = NULL;
Elm_Transit *transit = elm_transit_add();
snprintf(buf, sizeof(buf), "%s/images/btn_default.png", PACKAGE_DATA_DIR);
images = eina_list_append(images, eina_stringshare_add(buf));
snprintf(buf, sizeof(buf), "%s/images/btn_hover.png", PACKAGE_DATA_DIR);
images = eina_list_append(images, eina_stringshare_add(buf));
-elm_transit_effect_image_animation_add(transit, images);</pre>
+elm_transit_effect_image_animation_add(transit, images);
+</pre>
+</li>
+</ol>
-<h2 id="Animation_Duration" name="Animation_Duration">Animation Duration</h2>
+<h2 id="Animation_Duration" name="Animation_Duration">Managing 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>
+<p>With <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, setting the transition duration is mandatory.</p>
+<p>To manage animation duration:</p>
+<ul>
+<li>
+<p>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>
+<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>
+<p>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second parameter is the duration in seconds.</p>
<table class="note">
<tbody>
elm_transit_duration_set(transit, 2.0);
elm_transit_go(transit);
</pre>
-
+</li>
+<li>
<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>
+</li>
+</ul>
-<h2 id="Acceleration_Mode" name="Acceleration_Mode">Animation Acceleration Mode ("Tween Mode")</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'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>
+<h2 id="Acceleration_Mode" name="Acceleration_Mode">Setting the Animation Acceleration Mode ("Tween Mode")</h2>
-<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>
+<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.</p>
+<p>To manage the tween mode:</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>
+<li>
+<p>To change the animation'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 parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second parameter is the tween mode of the transition, which is defined by the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Tween_Mode</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">wearable</a> applications).</p>
+</li>
+<li>
<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>
+</li>
+</ul>
-<h2 id="Animation_Repeat" name="Animation_Repeat">Animation Repeat</h2>
+<h2 id="Animation_Repeat" name="Animation_Repeat">Managing Animation Repeat</h2>
+<p>To manage animation repeat:</p>
+<ul>
+<li>
<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>
+<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>
+<p>The first parameter is the transition you want to repeat. The second parameter is the number of times the transition is repeated.</p>
<table class="note">
<tbody>
<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>
+<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">repeat</span> parameter is set to 0, the transition does not loop at all. If set to 1, the transition runs twice. If set to a negative value, the transition repeats 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();
+<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>
+elm_transit_go(transit);
+</pre>
+</li>
+<li>
+<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>
+</li>
+</ul>
-<h2 id="Auto_Reverse" name="Auto_Reverse">Animation Auto-reverse</h2>
+<h2 id="Auto_Reverse" name="Auto_Reverse">Managing 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>
+<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>
+<p>The first parameter is the transition you want to reverse. The second parameter is the reverse state. If the reverse state is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, this function performs the same transition backwards as soon as the first transition is complete.</p>
<table class="note">
<tbody>
</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>
+ Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition runs back and forth until the repeat count is finished.
<p>You can calculate the duration as follows if both auto-reverse and repeat are set: 2 * duration * repeat.</p>
</td>
</tr>
<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>
+<h2 id="Transitions2" name="Transitions2">Managing Transitions</h2>
-<p>We distinguish two main transition types:</p>
+<p>There are 2 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>All transitions are based on the same principle: set the starting and the ending values for the properties to animate, then set the lifespan of the animation, and finally 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>To manage the different transition types:</p>
+<ul>
+<li id="Built-in_Transitions" name="Built-in_Transitions">Built-in transitions
-<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><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 do not have to code them from scratch.</p>
-<p>All these built-in effects are implemented as follows:</p>
+<p>To implement the built-in effects:</p>
-<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
elm_transit_effect_add(transit,
elm_transit_effect_translation_op,
elm_transit_effect_translation_context_new(),
- elm_transit_effect_translation_context_free);</pre>
+ elm_transit_effect_translation_context_free);
+</pre>
+<p>The parameters are:</p>
<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_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>
+<p>To rewrite the definitions:</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>
+</li>
+<li>Translation
<p>To perform a translation on an Evas object, use the following method:</p>
<pre class="prettyprint">
Evas_Coord to_dx,
Evas_Coord to_dy)
</pre>
-
+<p>The parameters are:</p>
<ul>
-<li>The first argument is the transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li>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>
elm_transit_duration_set(transit, 1);
elm_transit_go(transit);
</pre>
+</li>
+<li>Color transition
-<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>
+<p>Color transitions allow you to dynamically change the color of Evas objects. The first parameter is the transit object, while the other parameters are 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,
unsigned int to_b,
unsigned int to_a)
</pre>
-
+<p>The parameters are:</p>
<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 "Red".</li>
elm_transit_duration_set(transit, 3);
elm_transit_go(transit);
</pre>
+</li>
+<li>Rotation
+<p>To implement the rotation transition:</p>
-<h3>Rotation</h3>
-
-<pre class="prettyprint">elm_transit_effect_rotation_add(Elm_Transit *transit, float from_degree, float to_degree)</pre>
-
+<pre class="prettyprint">
+elm_transit_effect_rotation_add(Elm_Transit *transit, float from_degree, float to_degree)
+</pre>
+<p>The parameters are:</p>
<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>
+<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 2 parameters for the starting and ending angles. Note that if you apply a rotation on multiple objects, they 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
elm_transit_duration_set(transit, 2.0);
elm_transit_go(transit);
</pre>
-
-<h3>Wipe Effect</h3>
+</li>
+<li>Wipe effect
<p>The wipe effect is designed to dynamically hide or show any element on the scene.</p>
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>
+<p>In addition to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance passed as the first parameter, the function takes the following parameters:</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:
<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:
+<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 progressively appears or disappears. 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>
elm_transit_duration_set(transit, 2.0);
elm_transit_go(transit);
</pre>
-
-<h3>Zoom Effect</h3>
+</li>
+<li>Zoom effect
<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a zoom function.</p>
<pre class="prettyprint">
float from_rate,
float to_rate)
</pre>
-
+<p>The parameters are:</p>
<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>The <span style="font-family: Courier New,Courier,monospace;">from_rate</span> parameter 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>Setting the value of the <span style="font-family: Courier New,Courier,monospace;">to_rate</span> parameter to 2 doubles 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 remains 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>
+<p>The following example shows how to implement a zoom-out transition. At the end of the 2-second transition, the animated object is half its original size.</p>
<pre class="prettyprint">
Elm_Transit *transit = elm_transit_add();
elm_transit_duration_set(transit, 2.0);
elm_transit_go(transit);
</pre>
+</li>
-<h3>Resizing Effect</h3>
+<li>Resizing effect
<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements.</p>
Evas_Coord to_w,
Evas_Coord to_h)
</pre>
-
+<p>The parameters are:</p>
<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;">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>
+<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> parameter 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> parameter define the size at the end.</p>
<table class="note">
<tbody>
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>
+</li>
+<li>Flip effect
+<p>This transition combines the target Evas objects in pairs, so that one object shows 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>
Eina_Bool cw)
</pre>
-<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<p>The first parameter is the transit object. The second parameter 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>
+<p>The third parameter 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>
+<p>The following example shows how to create a coin that flips indefinitely. Note that images as Elementary UI components are used 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
<p class="figure">Figure: Coin flip</p>
<p align="center"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
+</li>
-<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>
+<li>Resizable flip effect
+<p>In the flip example above, 2 objects of the same size are used. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example is 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 changes 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,
Eina_Bool cw)
</pre>
-<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<p>The first parameter is the transit object. The second parameter 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>
+<p>The third parameter 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>
+</li>
+<li>Fade effect
-<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>
+<p>This effect is used to transition from one Evas object to another one using a fading effect: the first object slowly disappears to let the second object take its place.</p>
-<pre class="prettyprint">elm_transit_effect_fade_add(Elm_Transit *transit)</pre>
+<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>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 is the before object and the second one is 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>
<p>If you simply want to hide an object with a fade transition, consider using a transparent after object.</p>
+</li>
+<li>Blend effect
-<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>
+<p>Another transition involving at least 2 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>
+<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>The parameter 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>
<p>If you simply want to hide an object with a blur transition, consider using a transparent after object.</p>
+</li>
+</ul>
<h2 id="Combine_Transitions" name="Combine_Transitions">Combining Transitions</h2>
elm_transit_go(transit);
</pre>
-<h2 id="Animation_Chain" name="Animation_Chain">Animation Chain</h2>
+<h2 id="Animation_Chain" name="Animation_Chain">Creating an 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>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 parameters 2 <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects and automatically takes care of the chaining for you: the second transition starts 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>
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>
+<p>To manage the transition chain:</p>
+<ul>
+<li>
+<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 can 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>The first parameter is the transition object. The second parameter is the callback function to run on transition delete. The third parameter is the data to pass to the callback function.</p>
+<p>Note that you 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>
-<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>
+<pre class="prettyprint">
+elm_transit_chain_transit_add(t4, t1);
+</pre>
+</li>
+<li>
+<p>You can severe the chain relationship between 2 transits with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_del()</span> function:</p>
-<p>The first argument is the first transition in the chain. The second argument is the second transition in the chain.</p>
+<pre class="prettyprint">
+elm_transit_chain_transit_del(Elm_Transit *transit, Elm_Transit *chain_transit)
+</pre>
+<p>The first parameter is the first transition in the chain. The second parameter is the second transition in the chain.</p>
+</li>
+<li>
<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>
-
+</li>
+</ul>
+<h2 id="Animation_Timeline" name="Animation_Timeline">Managing Animation Timeline</h2>
+<p>To manage the animation timeline:</p>
+<ul>
+<li>
<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>
+<pre class="prettyprint">
+elm_transit_go(Elm_Transit *transit)
+</pre>
+</li>
+<li>
+<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 parameter to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>:</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>
+<pre class="prettyprint">
+elm_transit_paused_set(Elm_Transit *transit, Eina_Bool paused)
+</pre>
+</li>
+<li>
+<p>You can resume the transition with the same function but setting the paused parameter 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>
+</li>
+<li>
+<p>You can remain informed about the present transition flow and get the current frame with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_progress_value_get()</span> function. This function returns the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</p>
+</li>
+</ul>
-<h2 id="Custom_Transition" name="Custom_Transition">Custom Transitions</h2>
+<h2 id="Custom_Transition" name="Custom_Transition">Creating 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>
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a standard function for defining any effect of your choosing that is applied to some context data:</p>
<pre class="prettyprint">
elm_transit_effect_add(Elm_Transit *transit,
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>The first parameter is the transition target of the new effect. The second parameter is the transition callback function. The third parameter is the new effect. The fourth parameter 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>As described earlier in this programming guide, this function embraces 3 callbacks that allows you to define every aspects of your transition from its creation to its deletion.</p>
-<p>First, we define a structure capable of holding the context information about resizing an Evas object:</p>
+<p>To build a custom resizing animation:</p>
+<ol>
+<li>
+<p>Define a structure capable of holding the context information about resizing an Evas object:</p>
<pre class="prettyprint">
typedef struct
}
Custom_Effect;
</pre>
-
-<p>We can now implement our custom resizing callback function. This function takes the following arguments:</p>
+</li>
+<li>
+<p>Implement the custom resizing callback function. This function takes the following parameters:</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 transit object that contains the list of our Evas objects to animate and all the information, such as duration, auto-reverse, looping.</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>
-<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>
-
+<p>The callback function above resizes the Evas objects in 2 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 you get to the desired size.</p>
+</li>
+<li>
+<p>Define the context used by the 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)
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>
+</li>
+<li>
+<p>Define the function that takes care of deleting all the context objects used by your custom transition and free up the allocated memory:</p>
<pre class="prettyprint">
static void
free(data);
}
</pre>
+</li>
+<li>
-<p>Finally, apply your custom transition to your <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object:</p>
+<p>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();
_custom_context_new(),
_custom_context_free);
</pre>
-
+</li>
+<li>
<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>
+</li>
+</ol>
<table class="note">
<tbody>
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
<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>
+ <li><a href="#render">Configuring the Evas Object Rendering Mode</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>This tutorial shows how to create an application that enables scaling Evas text object by clicking buttons. The 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>To create the basic application:</p>
<ol>
<li>
-<p>To use the required APIs, include the following libraries:</p>
+<p>To use the required functions, include the following libraries:</p>
-<pre class="prettyprint">#include <app.h>
+<pre class="prettyprint">
+#include <app.h>
#include <Elementary.h>
#include <system_settings.h>
#include <efl_extension.h></pre>
<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
+<pre class="prettyprint">
+typedef struct
+appdata
{
Evas_Object *win;
Evas_Object *scale_incr_button;
<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>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and pass the name and title of the application as parameters. 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)
// Show the window
evas_object_show(ad->win);
-}</pre>
+}
+</pre>
</li>
<li>
<p>Implement callback functions to enable closing the application: </p>
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
back_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
{
ui_app_exit();
-}</pre>
+}
+</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
+<pre class="prettyprint">
+static bool
app_create(void *data)
{
appdata_s *ad = data;
// Run the main loop
return ui_app_main(argc, argv, &event_callback, &ad);
-}</pre>
+}
+</pre>
<h3 id="button" name="button">Creating Buttons</h3>
<p>To create buttons:</p>
<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' custom geometry.</p>
-<pre class="prettyprint">// Scale increasing button
+<pre class="prettyprint">
+// Scale increasing button
ad->scale_incr_button = elm_button_add(ad->win);
elm_object_text_set(ad->scale_incr_button, "Scale +");
evas_object_resize(ad->scale_incr_button, 120, 50);
elm_object_text_set(ad->scale_decr_button, "Scale -");
evas_object_resize(ad->scale_decr_button, 120, 50);
evas_object_move(ad->scale_decr_button, 180, 170);
-evas_object_show(ad->scale_decr_button);</pre>
+evas_object_show(ad->scale_decr_button);
+</pre>
</li>
<li>
<p>Create the render mode change buttons:</p>
-<pre class="prettyprint">// Blend render mode button
+<pre class="prettyprint">
+// Blend render mode button
ad->blend_mode_button = elm_button_add(ad->win);
elm_object_text_set(ad->blend_mode_button, "BLEND Mode");
evas_object_resize(ad->blend_mode_button, 190, 50);
elm_object_text_set(ad->copy_mode_button, "COPY Mode");
evas_object_resize(ad->copy_mode_button, 190, 50);
evas_object_move(ad->copy_mode_button, 260, 280);
-evas_object_show(ad->copy_mode_button);</pre>
+evas_object_show(ad->copy_mode_button);
+</pre>
</li>
</ol>
evas_object_smart_callback_add(ad->scale_incr_button, "clicked", scale_incr_cb, NULL);
evas_object_smart_callback_add(ad->scale_decr_button, "clicked", scale_decr_cb, NULL);
evas_object_smart_callback_add(ad->blend_mode_button, "clicked", blend_mode_cb, ad);
-evas_object_smart_callback_add(ad->copy_mode_button, "clicked", copy_mode_cb, ad);</pre>
+evas_object_smart_callback_add(ad->copy_mode_button, "clicked", 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
+<pre class="prettyprint">
+static void
scale_incr_cb(void *data, Evas_Object *obj, void *event_info)
{
Evas_Object *evas_text = evas_object_data_get(obj, "evas_text");
evas_object_text_text_set(ad->render_text, "EVAS_RENDER_COPY: d = s");
evas_object_render_op_set(ad->render_rect2, EVAS_RENDER_COPY);
-}</pre>
+}
+</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->win);</pre>
-</li>
-
-<li>
-<p>Create the Evas text object to be used as data attached to the button:</p>
-
-<pre class="prettyprint">
+evas = evas_object_evas_get(ad->win);
evas_text = evas_object_text_add(evas);
evas_object_text_text_set(evas_text, "Scalable Text Object");
evas_object_text_font_set(evas_text, "Sans", 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>
-
+evas_object_show(evas_text);
+</pre>
+<p>To attach data:</p>
+<ul>
+<li>Attach data
<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->scale_incr_button, "evas_text", evas_text);
-evas_object_data_set(ad->scale_decr_button, "evas_text", evas_text);</pre>
-
-<h3 id="getdata" name="detdata">Getting data</h3>
-
+evas_object_data_set(ad->scale_decr_button, "evas_text", evas_text);
+</pre>
+</li>
+<li>Get data
<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, "evas_text");</pre>
-
-<h3 id="deldata" name="deldata">Deleting data</h3>
-
+<pre class="prettyprint">
+Evas_Object *evas_text = evas_object_data_get(obj, "evas_text");
+</pre>
+</li>
+<li>Delete data
<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, "evas_text");</pre>
+<pre class="prettyprint">
+evas_object_data_del(obj, "evas_text");
+</pre>
+</li>
+</ul>
<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);
+<pre class="prettyprint">
+double current_scale = evas_object_scale_get(evas_text);
if (current_scale >= 5.0)
return;
-evas_object_scale_set(evas_text, current_scale + 0.2);</pre>
+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>
+<h2 id="render" name="render">Configuring the Evas Object Rendering 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>
+<p>To manage the rendering mode:</p>
+<ul>
+<li>Create Evas rectangle objects to change the Evas rendering mode for them:
-<pre class="prettyprint">// Rectangle with yellow background
+<pre class="prettyprint">
+// Rectangle with yellow background
ad->render_rect1 = evas_object_rectangle_add(evas);
evas_object_color_set(ad->render_rect1, 240, 220, 50, 191);
evas_object_resize(ad->render_rect1, 260, 260);
evas_object_color_set(ad->render_rect2, 25, 110, 220, 127);
evas_object_resize(ad->render_rect2, 260, 260);
evas_object_move(ad->render_rect2, 170, 500);
-evas_object_show(ad->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 "d = d*(1-sa) + s" formula, where "d" is destination color, "sa" is source alpha, and "s" is source color.</p>
-
-<p>Change the rendering mode to copy mode (d = s):</p>
-
-<pre class="prettyprint">evas_object_render_op_set(ad->render_rect2, EVAS_RENDER_COPY);</pre>
-
-
+evas_object_show(ad->render_rect2);
+</pre>
+</li>
+<li>Change the rendering mode operation
+<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 Evas 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 <span style="font-family: Courier New,Courier,monospace">d = d*(1-sa) + s</span> formula, where <span style="font-family: Courier New,Courier,monospace">d</span> is destination color, <span style="font-family: Courier New,Courier,monospace">sa</span> is source alpha, and <span style="font-family: Courier New,Courier,monospace">s</span> is source color.</p>
+<p>Change the rendering mode to copy mode <span style="font-family: Courier New,Courier,monospace">(d = s)</span>:</p>
+<pre class="prettyprint">
+evas_object_render_op_set(ad->render_rect2, EVAS_RENDER_COPY);
+</pre>
+</li>
+</ul>
<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="#ref">Counting References</a></li>
<li><a href="#order">Changing the Object Order on Canvas</a></li>
</ul>
<p class="toc-title">Related Info</p>
<h2 id="work" name="work">Working with Evas</h2>
+<p>To start working with Evas:</p>
<ol>
<li>
-<p>To start interacting with Evas, first create an Evas instance or get a reference to an already allocated Evas object:</p>
+<p>Create an Evas instance or get a reference to an already allocated Evas object:</p>
-<pre class="prettyprint">ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+<pre class="prettyprint">
+ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
-Evas *evas = evas_object_evas_get(ad->win);</pre>
+Evas *evas = evas_object_evas_get(ad->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>
+<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 a size of 480 x 800, position on window at 0,0 by x and y axis, and sets it as a background:</p>
<pre class="prettyprint">
ad->bg = evas_object_rectangle_add(evas);
<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->img = evas_object_image_filled_add(evas);
+<pre class="prettyprint">
+ad->img = evas_object_image_filled_add(evas);
_app_get_resource("images/enlightenment.png", image_path, PATH_MAX);
evas_object_image_file_set(ad->img, image_path, NULL);
if (evas_object_image_load_error_get(ad->img) != EVAS_LOAD_ERROR_NONE)
<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
+<pre class="prettyprint">
+static void
_clipper_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
{
App_Data *ad = (App_Data *)data;
evas_object_clip_unset(ad->img);
else
evas_object_clip_set(ad->img, ad->clipper);
-}</pre>
+}
+</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>
+<p>To manage the object color and visibility:</p>
-<pre class="prettyprint">static void
+<ul>
+<li>
+<p>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> function and pass a color value:</p>
+
+<pre class="prettyprint">
+static void
_color_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
{
App_Data *ad = (App_Data *)data;
evas_color_argb_premul(alpha, &r, &g, &b);
evas_object_color_set(ad->clipper, r, g, b, alpha);
-}</pre>
+}
+</pre>
<p class="figure">Figure: Applying color</p>
<p align="center"><img alt="Applying color" src="../../images/applying_color.png" /></p>
+</li>
+<li>
+<p>To change the opacity of the object:</p>
-<p>You can also change the opacity of the object:</p>
-
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
_opacity_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
{
App_Data *ad = (App_Data *)data;
evas_color_argb_premul(alpha, &r, &g, &b);
evas_object_color_set(ad->clipper, r, g, b, alpha);
-}</pre>
+}
+</pre>
<p class="figure">Figure: Changing opacity</p>
<p align="center"><img alt="Changing opacity" src="../../images/changing_opacity.png" /></p>
+</li>
+<li>
+<p>To hide the object when it is not needed:</p>
-<p>You can also hide the object when it is not needed:</p>
-
-<pre class="prettyprint">static void
+<pre class="prettyprint">
+static void
_visibility_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
{
App_Data *ad = (App_Data *)data;
evas_object_hide(ad->clipper);
else
evas_object_show(ad->clipper);
-}</pre>
+}
+</pre>
<p class="figure">Figure: Changing visibility</p>
<p align="center"><img alt=" Changing visibility" src="../../images/applying_invisibility.png" /></p>
+</li>
+</ul>
-<h2 id="ref" name="ref">Reference Counting</h2>
+<h2 id="ref" name="ref">Counting References</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>Evas has a simple reference counting mechanism that is useful for scenarios like inside a code block, callbacks exist which possibly delete an object that is operated 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^32 - 1 for each object:</p>
-<pre class="prettyprint">ad->spacer = evas_object_rectangle_add(evas);
+<pre class="prettyprint">
+ad->spacer = evas_object_rectangle_add(evas);
evas_object_color_set(ad->spacer, 0, 255, 100, 255);
evas_object_move(ad->spacer, 0, 0);
evas_object_resize(ad->spacer, 120, 20);
evas_object_move(ad->clipper_border, x + (w / 4) - 3, y + (h / 4) - 3);
evas_object_del(ad->spacer);
ad->spacer = NULL;
-}</pre>
+}
+</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->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->spacer)</span> function returns 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad->spacer)</span> function marks the rectangle object for deletion.</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>
+<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>
+<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);
+<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
+// Set the rectangle's 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'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's type.</p>
+<p>When debugging visual issues with Evas programs, the rectangle is a useful tool. The rectangle'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 with 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 with the original object, and in all likelihood any remaining issues are specific to that object's type.</p>
<h4>Clipping</h4>
-<p><a href="#clip">Clipping</a> serves two main functions:</p>
+<p><a href="#clip">Clipping</a> serves 2 main functions:</p>
<ul>
-<li>limiting visibility</li>
-<li>applying a layer of color to an object</li>
+<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);
+<pre class="prettyprint">
+Evas_Object *text = evas_object_text_add(evas_canvas);
evas_object_text_text_set(text, "some text");
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>
+<p>To set the text, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_set()</span> function. You can get the current text with the <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_get()</span> function.</p>
+
+<p>To manage the text style:</p>
+<ul>
+<li>
+<p>To set the font, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set()</span> function with the following parameters:</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>
+<li><span style="font-family: Courier New,Courier,monospace">size</span>: The font size you want to use.</li>
+</ul>
+<p>To query the current font, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_get()</span> function.</p>
+</li>
+<li>
+<p>To set the text style, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_set()</span> function with the style as the second parameter. The available values are defined in the <span style="font-family: Courier New,Courier,monospace">_Evas_Text_Style_Type</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Text.html#ga3e88a64ab40f18048667e61894f077cf">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Text.html#ga3e88a64ab40f18048667e61894f077cf">wearable</a> applications).</p>
+<p>To query the current style, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_get()</span> function.</p>
+</li>
+<li>
+<p>If the text does not fit, make an ellipsis on it by using the <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_set()</span> function. 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>
+<li><span style="font-family: Courier New,Courier,monospace">-1.0</span>: Ellipsis is disabled.</li>
+</ul>
+<p> To query the current ellipsis value, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_get()</span> function.</p>
+</li>
+<li>
+<p>When the text style is set to glow, set the glow color using the <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_set()</span>, function, where the second, third, fourth, and fifth parameters 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 the <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_set()</span> function.</p>
+<p>To query the current color, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_get()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_get()</span> functions.</p>
+</li>
+<li>
+<p>If the text style is set to display a shadow, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_set()</span> function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values.</p>
+<p>To query the current color, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_get()</span> function.</p>
+</li>
+<li>
+<p>If the text style is set to display an outline, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_set()</span> function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values. </p>
+<p>To query the current color, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_get()</span> function.</p>
+</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'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>
+<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object's user. They can 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>
+<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);
+
+<p>In the following example, a non-homogeneous table is added to the canvas with its padding set to 0.</p>
+<p>4 different colored rectangles are added with different properties.</p>
+<ul>
+<li>The first one, at the first column and first line, spans 2 columns and 1 line</li>
+<li>The second one, at the first column and second line, spans 1 columns and 2 lines</li>
+<li>The third one, at the second column and second line, fits in 1 cell</li>
+<li>The fourth one, at the second column and third line, also fits in 1 cell</li>
+</ul>
+<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_add()</span> function.</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(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>
+<p>To set the table layout, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_set()</span> function. 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>
+<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), 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 the <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span> function. If the table area is too small to hold this minimum bounding box, the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To get the current mode, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_get()</span> function.</li>
</ul>
-<p>The table'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>
+<p>The table's content alignment is set using the <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_set()</span> function, where the second and third parameters (<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 the current values, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span> function.</p>
+<p>To set the padding, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_set()</span> function. To see the current value, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_get()</span> function.</p>
+<p>To see the current column and row count, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_col_row_size_get()</span> function.</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'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>
+<p>Grids are added to the canvas with the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_add()</span> function.</p>
+<p>To change a grid's virtual resolution, use the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_set()</span> function, and to get the current value, use the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_get()</span> function.</p>
+<p>To add an object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_pack()</span> function, where the third, fourth, fifth, and sixth parameters are the following:</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>
+<li><span style="font-family: Courier New,Courier,monospace">x</span>: Virtual x coordinate of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">y</span>: Virtual y coordinate of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">w</span>: Virtual width of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">h</span>: 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>
+<p>To add a box to your canvas, use the <span style="font-family: Courier New,Courier,monospace">evas_object_box_add()</span> function.</p>
+<p>To add a child to the box, use the following functions:</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>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_append()</span>: The child is appended.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_after()</span>: The child is added after the reference item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_before()</span>: The child is added before the reference item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_at()</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>
+<p>To set the alignment, use the <span style="font-family: Courier New,Courier,monospace">evas_object_box_align_set()</span> function with the following values.</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>
+<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>
+<p>Evas has the following 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>
+<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>
</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>
+
+<p>A common use case of an image object is to set a file as the image data source.</p>
+
+<p>In the following 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 <Elementary.h>
-int main(int argc, char **argv)
+int
+main(int argc, char **argv)
{
elm_init(argc, argv);
<h3 id="manage" name="manage">Managing Images</h3>
<p>To manage image objects in Evas:</p>
-
-<h4>Limiting Visibility</h4>
+<ul>
+<li>Limiting visibility
<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>
<p>Create the image object. Set a source file on it, so that the object knows where to fetch the image data.</p>
<pre class="prettyprint">
evas_object_image_filled_set(img, EINA_TRUE);
</pre>
-
-<h4>Scaling Images</h4>
+</li>
+<li>Scaling images
<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>You 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>
<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' 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>Scaled images' 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 for you to disable the function.</p>
<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>
+<p>In the following example, 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 <Elementary.h>
-int main(int argc, char **argv)
+int
+main(int argc, char **argv)
{
elm_init(argc, argv);
</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>Evas caches scaled image data and reuses them. You 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>
-<p>An example code is as follows.</p>
+<p>The following example shows how to load the image in the scaled size.</p>
<pre class="prettyprint">
#include <Elementary.h>
-int main(int argc, char **argv)
+int
+main(int argc, char **argv)
{
elm_init(argc, argv);
return 0;
}
</pre>
+</li>
+</ul>
<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>
+<p>You 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 must 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_size_set(Evas_Object *obj, int w, int h);</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, you 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>
-<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_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 you 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>
<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>
+<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);
<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 <Elementary.h>
-void image_blur(Evas_Object *img)
+void
+image_blur(Evas_Object *img)
{
unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);
evas_object_image_data_update_add(img, 0, 0, w, h);
}
-int main(int argc, char **argv)
+int
+main(int argc, char **argv)
{
elm_init(argc, argv);
<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"><font_size=50>Big!</font_size></span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace"><font_size=50 color=#F00>Big and Red!</font_size></span>. Please note that we used <span style="font-family: Courier New,Courier,monospace"></font_size></span> although the format also included color. This is because the first format determines the matching closing tag's name. You can use anonymous tags, such as <span style="font-family: Courier New,Courier,monospace"><font_size=30>Big</></span>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
+<p>To set markup to format text, use for example <span style="font-family: Courier New,Courier,monospace"><font_size=50>Big!</font_size></span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace"><font_size=50 color=#F00>Big and Red!</font_size></span>. Note that <span style="font-family: Courier New,Courier,monospace"></font_size></span> is used although the format also included color. This is because the first format determines the matching closing tag's name. You can use anonymous tags, such as <span style="font-family: Courier New,Courier,monospace"><font_size=30>Big</></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 "Sans:style=Italic:lang=hi" or "Serif:style=Bold".</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in "font". For example, "font_weight=Bold" is the same as "font=:style=Bold". The supported weights are "normal", "thin", "ultralight", "light", "book", "medium", "semibold", "bold", "ultrabold", "black", and "extrablack".</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in "font". For example, "font_style=Italic" is the same as "font=:style=Italic". The supported styles are "normal", "oblique", and "italic".</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in "font". For example, "font_width=Condensed" is the same as "font=:style=Condensed". The supported widths are "normal", "ultracondensed", "extracondensed", "condensed", "semicondensed", "semiexpanded", "expanded", "extraexpanded", and "ultraexpanded".</li>
-<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in "font". For example, "lang=he" is the same as "font=:lang=he".</li>
+<li><span style="font-family: Courier New,Courier,monospace">font</span>: Font description in fontconfig such as format, for example <span style="font-family: Courier New,Courier,monospace">"Sans:style=Italic:lang=hi" or "Serif:style=Bold"</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">font_weight=Bold</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:style=Bold</span>. The supported weights are <span style="font-family: Courier New,Courier,monospace">normal</span>, <span style="font-family: Courier New,Courier,monospace">thin</span>, <span style="font-family: Courier New,Courier,monospace">ultralight</span>, <span style="font-family: Courier New,Courier,monospace">light</span>, <span style="font-family: Courier New,Courier,monospace">book</span>, <span style="font-family: Courier New,Courier,monospace">medium</span>, <span style="font-family: Courier New,Courier,monospace">semibold</span>, <span style="font-family: Courier New,Courier,monospace">bold</span>, <span style="font-family: Courier New,Courier,monospace">ultrabold</span>, <span style="font-family: Courier New,Courier,monospace">black</span>, and <span style="font-family: Courier New,Courier,monospace">extrablack</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">font_style=Italic</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:style=Italic</span>. The supported styles are <span style="font-family: Courier New,Courier,monospace">normal</span>, <span style="font-family: Courier New,Courier,monospace">oblique</span>, and <span style="font-family: Courier New,Courier,monospace">italic</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">font_width=Condensed</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:style=Condensed</span>. The supported widths are <span style="font-family: Courier New,Courier,monospace">normal</span>, <span style="font-family: Courier New,Courier,monospace">ultracondensed</span>, <span style="font-family: Courier New,Courier,monospace">extracondensed</span>, <span style="font-family: Courier New,Courier,monospace">condensed</span>, <span style="font-family: Courier New,Courier,monospace">semicondensed</span>, <span style="font-family: Courier New,Courier,monospace">semiexpanded</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">extraexpanded</span>, and <span style="font-family: Courier New,Courier,monospace">ultraexpanded</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">lang=he</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:lang=he</span>.</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: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: "auto" (according to text direction), "left", "right", "center" or "middle", 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: "top", "bottom", "middle", "center", "baseline" or "base", 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: "word", "char", "mixed", or "none".</li>
-<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either "reset" or a pixel value indicating the margin.</li>
-<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either "reset" 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: "on", "off", "single", or "double".</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either "on" or "off".</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: "on" or "off".</li>
-<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: "off", "none", "plain", "shadow", "outline", "soft_outline", "outline_shadow", "outline_soft_shadow", "glow", "far_shadow", "soft_shadow", or "far_soft_shadow". The direction is selected by adding "bottom_right", "bottom", "bottom_left", "left", "top_left", "top", "top_right", or "right". For example, "style=shadow,bottom_right".</li>
+<li><span style="font-family: Courier New,Courier,monospace">color</span>: The text color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: <span style="font-family: Courier New,Courier,monospace">auto</span> (according to text direction), <span style="font-family: Courier New,Courier,monospace">left</span>, <span style="font-family: Courier New,Courier,monospace">right</span>, <span style="font-family: Courier New,Courier,monospace">center</span>, or <span style="font-family: Courier New,Courier,monospace">middle</span>, 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: <span style="font-family: Courier New,Courier,monospace">top</span>, <span style="font-family: Courier New,Courier,monospace">bottom</span>, <span style="font-family: Courier New,Courier,monospace">middle</span>, <span style="font-family: Courier New,Courier,monospace">center</span>, <span style="font-family: Courier New,Courier,monospace">baseline</span>, or <span style="font-family: Courier New,Courier,monospace">base</span>, 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: <span style="font-family: Courier New,Courier,monospace">word</span>, <span style="font-family: Courier New,Courier,monospace">char</span>, <span style="font-family: Courier New,Courier,monospace">mixed</span>, or <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either <span style="font-family: Courier New,Courier,monospace">reset</span> or a pixel value indicating the margin.</li>
+<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either <span style="font-family: Courier New,Courier,monospace">reset</span> 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: <span style="font-family: Courier New,Courier,monospace">on</span>, <span style="font-family: Courier New,Courier,monospace">off</span>, <span style="font-family: Courier New,Courier,monospace">single</span>, or <span style="font-family: Courier New,Courier,monospace">double</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either <span style="font-family: Courier New,Courier,monospace">on</span> or <span style="font-family: Courier New,Courier,monospace">off</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: <span style="font-family: Courier New,Courier,monospace">on</span> or <span style="font-family: Courier New,Courier,monospace">off</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: <span style="font-family: Courier New,Courier,monospace">off</span>, <span style="font-family: Courier New,Courier,monospace">none</span>, <span style="font-family: Courier New,Courier,monospace">plain</span>, <span style="font-family: Courier New,Courier,monospace">shadow</span>, <span style="font-family: Courier New,Courier,monospace">outline</span>, <span style="font-family: Courier New,Courier,monospace">soft_outline</span>, <span style="font-family: Courier New,Courier,monospace">outline_shadow</span>, <span style="font-family: Courier New,Courier,monospace">outline_soft_shadow</span>, <span style="font-family: Courier New,Courier,monospace">glow</span>, <span style="font-family: Courier New,Courier,monospace">far_shadow</span>, <span style="font-family: Courier New,Courier,monospace">soft_shadow</span>, or <span style="font-family: Courier New,Courier,monospace">far_soft_shadow</span>. The direction is selected by adding <span style="font-family: Courier New,Courier,monospace">bottom_right</span>, <span style="font-family: Courier New,Courier,monospace">bottom</span>, <span style="font-family: Courier New,Courier,monospace">bottom_left</span>, <span style="font-family: Courier New,Courier,monospace">left</span>, <span style="font-family: Courier New,Courier,monospace">top_left</span>, <span style="font-family: Courier New,Courier,monospace">top</span>, <span style="font-family: Courier New,Courier,monospace">top_right</span>, or <span style="font-family: Courier New,Courier,monospace">right</span>. For example, <span style="font-family: Courier New,Courier,monospace">style=shadow,bottom_right</span>.</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 "size", "abssize", or "relsize" to define the item"s size, and an optional vsize = full/ascent to define the item's position in the line.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item</span>: Creates an empty space that is filled by an upper layer. Use <span style="font-family: Courier New,Courier,monospace">size</span>, <span style="font-family: Courier New,Courier,monospace">abssize</span>, or <span style="font-family: Courier New,Courier,monospace">relsize</span> to define the item's size, and an optional vsize = full/ascent to define the item'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 "on" or "off", this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
+<li><span style="font-family: Courier New,Courier,monospace">password</span>: Either <span style="font-family: Courier New,Courier,monospace">on</span> or <span style="font-family: Courier New,Courier,monospace">off</span>, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
</ul>
<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);
+<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. To do this, create a solid white rectangle (by default, so you need not use the <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span> function) and give it a position and size of what is wanted visible. The following code example shows how to show the center half of <span style="font-family: Courier New,Courier,monospace">my_evas_object</span>: </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);
</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'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);
+<p>A solid white clipper does not produce a change in the color of the clipped object, only hides what is outside the clipper'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);
<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>
+<p>Evas allows different transformations to be applied to all kinds of objects. These are applied by means of UV mapping. With UV mapping, 1 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);
+<p>A map consists of a set of points, but currently only 4 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 the <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set()</span> function. In the following example, 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, 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);
+<p>To ease the process:</p>
+<ul>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_geometry()</span> function, where the map coordinates are set to the given rectangle, and the last parameter 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);
+</li>
+<li>
+<p>You can also use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object()</span> function.</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>
+</li>
+<li>
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object_full()</span>, where the last parameter 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>
-
+</li>
+</ul>
<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);
+<p>Several effects are applied to an object by setting each point of the map to the right coordinates. The following example creates a simulated perspective.</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>
+<p>The Z coordinate is not used when setting points by hand, and 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);
+<p>Regardless of the specific way you create a map, to apply it to a specific object, use the following functions:</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>
+<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate()</span>: This function 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()</span>: This function 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;
+<pre class="prettyprint">
+int x, y, w, h;
evas_object_geometry_get(object, &x, &y, &w, &h);
Evas_Map *map = evas_map_new(4);
evas_map_util_points_populate_from_object(map, object);
</pre>
<p>The following code rotates an object around the center of the window.</p>
-<pre class="prettyprint">int w, h;
+<pre class="prettyprint">
+int w, h;
evas_output_size_get(evas, &w, &h);
Evas_Map *map = evas_map_new(4);
evas_map_util_points_populate_from_object(map, object);
<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>
+<p>To make a 3D rotation, use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function. 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 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. Use the following parameters:</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 "infinite distance" 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 "focal length" 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 "depth" 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'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>
+<h3>Color and Lighting</h3>
+<p>Each point in a map can be set to a color, which is multiplied with the object'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()</span> to set every point into the same color.</p>
+<p>To add lighting for the objects, which is useful with 3D transforms, use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_lighting()</span> function with the following parameters:</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>
+<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 you and becomes obscured, since no light does not reflect from it.</li>
</ul>
<table class="note">
<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' state on the display.</p>
+<p>Evas is a canvas display library. It is different from most display and windowing systems as the canvas is structural and also a state engine, whereas most display and windowing systems are immediate mode display targets. Evas handles the logic between a structural display using its state engine, and controls the target windowing system to produce rendered results of the current canvas' 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 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 "expose event"). Then the programmer calculates manually the updates and repaints it again.</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 for 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 for the display to be fast and interactive, and to keep track of redraw logic.</p>
+<p>For example, if in the following scene, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the "expose event"), 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)?
+ // 1. intersection part of line (0, 0) to (100, 200)?
draw line from position (0, 0) to position (25, 50);
-// 2. intersection part of rectangle (10, 30) to (50, 500)?
+ // 2. intersection part of rectangle (10, 30) to (50, 500)?
draw rectangle from position (10, 30) to position (50, 50)
-// 3. intersection part of image at (10, 30), size 100 x 100?
+ // 3. intersection part of image at (10, 30), size 100 x 100?
bitmap_subimage = subregion from position (0, 0) to position (40, 20)
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>If all elements in the 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">
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>This code looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, or hides 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 to 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, such as to render given the current display system. 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, or push buttons.</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>
+<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:</p>
<ul>
-<li>buffer: all the rendering takes place in a buffer</li>
-<li>fb: the rendering takes place in the system'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>
+<li><span style="font-family: Courier New,Courier,monospace">buffer</span>: All the rendering takes place in a buffer</li>
+<li><span style="font-family: Courier New,Courier,monospace">fb</span>: The rendering takes place in the system's framebuffer</li>
+<li><span style="font-family: Courier New,Courier,monospace">software_x11</span>: The most used, using X11</li>
+<li><span style="font-family: Courier New,Courier,monospace">gl_x11</span>: 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>
+<p>These engines 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 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 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 happens at all.</p>
<p>The following example explains the common usage of the immediate mode:</p>
<pre class="prettyprint">
-void update()
+void
+update()
{
Image *img = load_image(NEW_IMG);
<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()
+void
+create_image()
{
// Initialize an image object to be displayed on the screen
Evas_Object *img = evas_object_image_add(e);
evas_object_show(img);
}
-void create_rectangle()
+void
+create_rectangle()
{
// Initialize an rectangle object to be displayed on the screen
Evas_Object *rect = evas_object_rectangle_add(e);
<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's on rendering time.</p>
<pre class="prettyprint">
-void update()
+void
+update()
{
// Set new image resource
elm_image_file_set(img, NEW_IMG, NULL);
<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>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 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>
+<p>If Evas worked in an immediate mode style, the application needs 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>s
<table class="note">
<tbody>
<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>
+ <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 with 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>
_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>
+<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 with 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)
<p>You can manage the item style and size:</p>
<ul>
-<li>Managing the item style:
+<li>Manage 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->itc->item_style = "default";
<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:
+<li>Set 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:
+<li id="item_class_update">Change 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)
_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>
+<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 with 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)
ret = ui_app_main(argc, argv, &event_callback, &ad);
if (ret != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() failed. err = %d", ret);
}
return ret;
ret = ui_app_main(argc, argv, &event_callback, &ad);
if (ret != APP_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() failed. err = %d", ret);
}
return ret;
<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>In this tutorial, you create a fully functional application that is 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>
+ <h2 id="init" name="init">Initializing Multi-point Touch</h2>
+<p>To initialize multi-point touch for use:</p>
+<ol>
+<li>
+<p>Initialization is implemented in the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file. 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
{
}
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>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function initializes the 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[])
}
</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>
+</li>
+</ol>
<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>
+ <p>To handle the canvas:</p>
+ <ol>
+ <li>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the 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
+<pre class="prettyprint">
+static void
create_base_gui(appdata_s *ad)
{
Elm_Object_Item *nf_it;
elm_object_item_part_content_set(nf_it, "title_right_btn", ad->button);
}
</pre>
-
+</li>
+<li>
<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>
+<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. In this case, a box container is used. 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 *
+<pre class="prettyprint">
+static Evas_Object *
create_main_view(appdata_s *ad)
{
Evas_Object *box;
return box;
}
</pre>
-
+</li>
+<li>
<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 *
+<pre class="prettyprint">
+Evas_Object *
create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
{
Evas_Object *spot;
return spot;
}
</pre>
-
-<p>The rectangle object is stored in <span style="font-family: Courier New,Courier,monospace">Eina_List (ad->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->spots</span> list, meaning all spot rectangles are cleared.</p>
+</li>
+<li>
+<p>The rectangle object is stored in <span style="font-family: Courier New,Courier,monospace">Eina_List(ad->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->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)
elm_object_text_set(ad->label, "Clear");
}
</pre>
+</li>
+</ol>
<h2 id="touch" name="touch">Managing Touch Events</h2>
<p>To manage popup events:</p>
<ul>
-<li>Handle timeout events:
+<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
evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
</pre></li>
-<li>Handle block clicked events:
+<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
}
else
{
- dlog_print(DLOG_DEBUG, LOG_TAG, "Rotary device rotated in counter clockwise direction");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Rotary device rotated in counter-clockwise direction");
}
return EINA_FALSE;
<p>You can configure some properties of the tap gestures:</p>
<ul><li>
-<p>You can modify the timeout value for a long tap or double tap gesture.</p>
+<p>Modify the timeout value for a long tap or double tap gesture.</p>
<p>The default values are defined in the system policy. In the Tizen SDK 2.4, they are 0.5 seconds for a long tap, and 0.33 seconds for a double tap.</p>
<pre class="prettyprint">
// Get or set the gesture layer long tap start timeout of an object
<p>You can configure some properties of the line gestures:</p>
<ul><li>
-<p>You can modify the minimum length and distance tolerance of a line.</p>
+<p>Modify the minimum length and distance tolerance of a line.</p>
<p>The default values are defined in the system policy. In the Tizen SDK 2.4, they are 40 for the minimum length, and 40 for the distance tolerance.</p>
<pre class="prettyprint">
// Get or set the gesture layer line min length of an object
</pre></li>
<li>
-<p>You can enable the continue mode to allow the line, flick, zoom, and rotate gesture to restart. The default value is <span style="font-family: Courier New,Courier,monospace">TRUE</span>.</p>
+<p>Enable the continue mode to allow the line, flick, zoom, and rotate gesture to restart. The default value is <span style="font-family: Courier New,Courier,monospace">TRUE</span>.</p>
<p>For example, when drawing a line, the finger can stop moving while the finger stays on the touch screen. This action makes the line end. After the finger continues to move, the line gesture restarts. When the continue mode is disabled, the finger has to be lifted off the touch screen to end a gesture, and then touch the screen again to start a new gesture.</p>
<pre class="prettyprint">
// Get or set the gesture layer continue mode of an object
<h2 id="flick" name="flick">Implementing Flick Gestures</h2>
-<p>You can configure some properties of the tap gestures:</p>
-<ul><li><p>You can modify the flick time limit of the flick gesture.</p>
+<p>You can modify the flick time limit of the flick gesture.</p>
<p>The default value is defined in the system policy. In the Tizen SDK 2.4, it is 250 ms.</p>
<pre class="prettyprint">
// Get or set the gesture layer flick time limit (in milliseconds) of an object
void elm_gesture_layer_flick_time_limit_ms_set(Evas_Object *obj, unsigned int flick_time_limit_ms);
unsigned int elm_gesture_layer_flick_time_limit_ms_get(const Evas_Object *obj);
-</pre></li></ul>
-
+</pre>
<p>The flick gesture states and the gesture info data structures are the same as in the <a href="#line">line gesture</a>.</p>
<h2 id="zoom" name="zoom">Implementing Zoom Gestures</h2>
-<p>You can configure some properties of the zoom gestures:</p>
-
-<ul><li><p>You can modify various zoom values, such as zoom step and distance tolerance.</p>
+<p>You can modify various zoom values, such as zoom step and distance tolerance.</p>
<p>The default values are defined in the system policy. In the Tizen SDK 2.4, they are:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">zoom_step</span>: 0.0</li>
// Get or set the gesture layer zoom finger factor of an object
void elm_gesture_layer_zoom_finger_factor_set(Evas_Object *obj, double zoom_finger_factor);
double elm_gesture_layer_zoom_finger_factor_get(const Evas_Object *obj);
-</pre></li></ul>
+</pre>
<p>The zoom gesture states are the same as in the <a href="#tap">tap gesture</a>.</p>
<p>When using zoom gestures, pay attention to the following:</p>
<ul><li>
-<p>The default zoom value is 1,when the zoom gesture starts. After every zoom gesture, the value is increased or decreased according to the internal calculation logic. The radius value is used for the calculation.</p></li>
+<p>The default zoom value is 1, when the zoom gesture starts. After every zoom gesture, the value is increased or decreased according to the internal calculation logic. The radius value is used for the calculation.</p></li>
<li><p>If the mouse wheel events are sent with the <strong>Ctrl</strong> key on the gesture layer, the <span style="font-family: Courier New,Courier,monospace">zoom_start()</span> callback function is called with the default zoom value (1) and the zoom value (<span style="font-family: Courier New,Courier,monospace">zoom_finger_factor * zoom _wheel_factor</span>) is increased or decreased on every step to follow the wheel up or down.</p></li>
<li><p>If a 2-finger down event points closer than the zoom distance tolerance value, the zoom gesture is not started. After the gap is bigger than the <span style="font-family: Courier New,Courier,monospace">zoom_distance_tolerance</span> value, the zoom gesture is started with the default value 1 and the event info gets a radius value and the gesture's momentum value.</p></li></ul>
<h2 id="rotate" name="rotate">Implementing Rotate Gestures</h2>
-<p>You can configure some properties of the rotate gestures:</p>
-<ul><li>
<p>You can modify the rotate step and tolerance.</p>
<p>The default values are defined in the system policy. In the Tizen SDK 2.4, they are 0.0 for the rotate step, and 0.0349 for the angular tolerance.</p>
<pre class="prettyprint">
// Get or set the gesture layer rotate angular tolerance of an object
void elm_gesture_layer_rotate_angular_tolerance_set(Evas_Object *obj, double rotate_angular_tolerance);
double elm_gesture_layer_rotate_angular_tolerance_get(const Evas_Object *obj);
-</pre></li></ul>
+</pre>
<p>The rotate gesture states are the same as in the <a href="#tap">tap gesture</a>.</p>
<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>
+ <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>
</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>
+
<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To get <span style="font-family: Courier New,Courier,monospace">tau.animation.min.js</span> library, please create new project with <span style="font-family: Courier New,Courier,monospace">UIComponents</span> sample and you can get this in <span style="font-family: Courier New,Courier,monospace">lib/tau/animation</span> directory.</td>
- </tr>
- </tbody>
- </table>
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">To get the <span style="font-family: Courier New,Courier,monospace">tau.animation.min.js</span> library, create a new project from the <a href="../../../../org.tizen.sampledescriptions/html/mobile_w/uicomponent_mw.htm">UIComponent</a> sample. The library is included in the sample's <span style="font-family: Courier New,Courier,monospace">lib/tau/animation</span> directory.</td>
+ </tr>
+ </tbody>
+</table>
<h2 id="create">Creating TAU Animations</h2>
projects / sdk / online-doc.git / commitdiff
