<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
- <title>Check</title>
+ <title>Check</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
+
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.3.1 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#Adding">Adding a Check Component</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>
+ <li><a href="#basic">Basic Usage</a></li>
+ <li><a href="#style">Styles</a></li>
+ <li><a href="#callback">Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Check</h1>
-<p>This feature is supported in wearable applications only.</p>
-
-<p>The check component is similar to the <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>
-
-<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Check.html">Check</a> API.</p>
+<p>The check UI component accepts user input by the method of toggling. It is similar to the <a href="component_radio_wn.htm">radio</a> component, except that it does not work as a group. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Check.html">Check</a> API.</p>
-<p class="figure">Figure: Check component</p>
-<p align="center"><img alt="Check component" src="../../../images/check_wn.png" /></p>
-
-<p class="figure">Figure: Check hierarchy</p>
-<p align="center"><img alt="Check hierarchy" src="../../../images/check_tree.png" /></p>
-
-<h2 id="Adding" name="Adding">Adding a Check Component</h2>
+<p>This feature is supported in wearable applications only.</p>
-<p>To create a check component, use the <span style="font-family: Courier New,Courier,monospace;">elm_check_add()</span> function:</p>
+<h2 id="basic">Basic Usage</h2>
+<p>To use a check component in your application:</p>
+<ol>
+<li>Add a check component with the <span style="font-family: Courier New,Courier,monospace;">elm_check_add()</span> function:
<pre class="prettyprint">
Evas_Object *check;
-Evas_Object *parent;
check = elm_check_add(parent);
</pre>
-
-<h2 id="Modifying" name="Modifying">Configuring the Check Component</h2>
-
-<p>To configure the check component:</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></li>
-<li><p>The following styles are available for the circular screen:</p>
+</li>
+<li>Set a <a href="#style">style</a> and fill the check component with a text or an image according to the style:
<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></li></ul>
-<pre class="prettyprint">
-elm_object_style_set(check, "on and off");
-</pre>
-
-<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function:</p>
+<li>Set a style to the check component with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
-char *style = elm_object_style_get(check);
+elm_object_style_set(check, "popup");
</pre>
</li>
-<li>
-<p>Set an icon for the rectangular screen:</p>
+<li>Set a label to the check component with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:
<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);
+/* Default style */
+elm_object_text_set(check, "Check");
</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 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>
+<li>Register the <a href="#callback">callback</a> functions.
+<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
<pre class="prettyprint">
-Eina_Bool value = elm_check_state_get(check);
-</pre>
-</li>
+evas_object_smart_callback_add(check, "changed", changed_cb, data);
-<li>
-<p>Retrieve the content set to the check component:</p>
+void
+changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+</pre>
+ </li>
+</ol>
+
+<p>The following example shows a simple use case of the check component.</p>
+<table border="0">
+ <caption>Example: Check use case</caption>
+ <tbody>
+ <tr>
+ <td>
<pre class="prettyprint">
-/* Get the icon part content */
-Evas_Object *icon = elm_object_part_content_get(check, "icon");
+Evas_Object *win;
+Evas_Object *conf;
+Evas_Object *nf;
+Evas_Object *box;
+Evas_Object *check;
+
+/* Starting right after <a href="ui_layouts_n.htm#code">the basic EFL UI layout code</a> */
+/* win - conformant - naviframe */
+
+/* Add a box to pack a check */
+box = elm_box_add(nf);
+evas_object_show(box);
+elm_naviframe_item_push(nf, "Check", NULL, NULL, box, NULL);
+
+check = elm_check_add(box);
+
+elm_object_style_set(check, "default");
+evas_object_show(check);
+elm_box_pack_end(box, check);
+
+check = elm_check_add(box);
+elm_object_style_set(check, "on&off");
+evas_object_show(check);
+elm_box_pack_end(box, check);
</pre>
-</li>
-</ul>
+ </td>
+ <td>
+ <p align="center"><img alt="Circle check component" src="../../../images/check_wear_sq_default.png" /><img alt="Rect check component" src="../../../images/check_wear_circle_default.png" /></p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2 id="style">Styles</h2>
+<p>The following table lists the available component styles.</p>
+<table>
+ <caption>Table: Check styles for rectangular devices</caption>
+ <tbody>
+ <tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td align="center"><img alt="elm/check/base/default" src="../../../images/rect_default_popup.png" /></td>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">on&off</span></td>
+ <td align="center"><img alt="elm/check/base/on&off" src="../../../images/rect_onoff.png" /></td>
+ <td>N/A</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">popup</span></td>
+ <td align="center"><img alt="elm/check/base/popup" src="../../../images/rect_default_popup.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
-<h2 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h2>
+<table>
+ <caption>Table: Check styles for circular devices</caption>
+ <tbody>
+ <tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td align="center"><img alt="elm/check/base/default" src="../../../images/circle_default.png" /></td>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">on&off</span></td>
+ <td align="center"><img alt="elm/check/base/on&off" src="../../../images/circle_onoff.png" /></td>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">small popup</span></td>
+ <td align="center"><img alt="elm/check/base/popup" src="../../../images/circle_small_popup.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="callback">Callbacks</h2>
+
+<p>You can register callback functions connected to the following signals for a check object.</p>
+
+<table>
+ <caption>Table: Check callback signals</caption>
+ <tbody>
+ <tr>
+ <th>Signal</th>
+ <th>Description</th>
+ <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td>The check component value changes.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ </tr>
+ </tbody>
+</table>
-<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>
<table class="note">
<tbody>
</tbody>
</table>
-<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(check, "changed", changed_cb, data);
-}
-
-/* Callback for the "changed" signal */
-/* Called when the check value changes */
-void
-changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
-}
-</pre>
-
-
<table class="note">
<tbody>
<tr>
<div id="footer">
<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
+</div>
<script type="text/javascript">
</body>
</html>
-
projects / sdk / online-doc.git / commitdiff
