From: Wonki Kim Date: Fri, 4 Nov 2016 07:00:27 +0000 (+0900) Subject: check: enrich wearable check guide X-Git-Tag: tizen_3.0/TD_SYNC/20161201~20^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=refs%2Fchanges%2F64%2F95664%2F3;p=sdk%2Fonline-doc.git check: enrich wearable check guide enrich documentation and make it following documation convention. PS2: [LB] Reviewed PS3: [LB] Reviewed Change-Id: I88ce4fbf9e713ae0b0808fb735f594fd54fc202c Signed-off-by: Wonki Kim --- diff --git a/org.tizen.guides/html/images/check_default_o_wn.png b/org.tizen.guides/html/images/check_default_o_wn.png index 8db85e1..e2211d2 100644 Binary files a/org.tizen.guides/html/images/check_default_o_wn.png and b/org.tizen.guides/html/images/check_default_o_wn.png differ diff --git a/org.tizen.guides/html/images/check_onoff_o_wn.png b/org.tizen.guides/html/images/check_onoff_o_wn.png index 3d0bb7c..c720feb 100644 Binary files a/org.tizen.guides/html/images/check_onoff_o_wn.png and b/org.tizen.guides/html/images/check_onoff_o_wn.png differ diff --git a/org.tizen.guides/html/images/check_small_o_wn.png b/org.tizen.guides/html/images/check_small_o_wn.png index 6c66508..9f783cb 100644 Binary files a/org.tizen.guides/html/images/check_small_o_wn.png and b/org.tizen.guides/html/images/check_small_o_wn.png differ diff --git a/org.tizen.guides/html/images/check_wear_circle_default.png b/org.tizen.guides/html/images/check_wear_circle_default.png new file mode 100644 index 0000000..68f7e05 Binary files /dev/null and b/org.tizen.guides/html/images/check_wear_circle_default.png differ diff --git a/org.tizen.guides/html/images/check_wear_sq_default.png b/org.tizen.guides/html/images/check_wear_sq_default.png new file mode 100644 index 0000000..738580d Binary files /dev/null and b/org.tizen.guides/html/images/check_wear_sq_default.png differ diff --git a/org.tizen.guides/html/images/circle_default.png b/org.tizen.guides/html/images/circle_default.png new file mode 100644 index 0000000..36bfa06 Binary files /dev/null and b/org.tizen.guides/html/images/circle_default.png differ diff --git a/org.tizen.guides/html/images/circle_onoff.png b/org.tizen.guides/html/images/circle_onoff.png new file mode 100644 index 0000000..ccfeb0e Binary files /dev/null and b/org.tizen.guides/html/images/circle_onoff.png differ diff --git a/org.tizen.guides/html/images/circle_small_popup.png b/org.tizen.guides/html/images/circle_small_popup.png new file mode 100644 index 0000000..40da6eb Binary files /dev/null and b/org.tizen.guides/html/images/circle_small_popup.png differ diff --git a/org.tizen.guides/html/images/rect_default_popup.png b/org.tizen.guides/html/images/rect_default_popup.png new file mode 100644 index 0000000..1ca2a2d Binary files /dev/null and b/org.tizen.guides/html/images/rect_default_popup.png differ diff --git a/org.tizen.guides/html/images/rect_onoff.png b/org.tizen.guides/html/images/rect_onoff.png new file mode 100644 index 0000000..41653e8 Binary files /dev/null and b/org.tizen.guides/html/images/rect_onoff.png differ diff --git a/org.tizen.guides/html/native/ui/efl/component_check_wn.htm b/org.tizen.guides/html/native/ui/efl/component_check_wn.htm index 4ecc3e1..86a7faa 100644 --- a/org.tizen.guides/html/native/ui/efl/component_check_wn.htm +++ b/org.tizen.guides/html/native/ui/efl/component_check_wn.htm @@ -5,13 +5,13 @@ - + - Check + Check @@ -21,124 +21,192 @@

Wearable native

- +

Check

-

This feature is supported in wearable applications only.

- -

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.

- -

The check component inherits from the layout component, which means that layout functions can be used on the check component.

- -

For more information, see the Check API.

+

The check UI component accepts user input by the method of toggling. It is similar to the radio component, except that it does not work as a group. For more information, see the Check API.

-

Figure: Check component

-

Check component

- -

Figure: Check hierarchy

-

Check hierarchy

- -

Adding a Check Component

+

This feature is supported in wearable applications only.

-

To create a check component, use the elm_check_add() function:

+

Basic Usage

+

To use a check component in your application:

+
    +
  1. Add a check component with the elm_check_add() function:
     Evas_Object *check;
    -Evas_Object *parent;
     
     check = elm_check_add(parent);
     
    - -

    Configuring the Check Component

    - -

    To configure the check component:

    - -
      -
    • Set the check component style:

      -
      • The following styles are available for the rectangular screen:

        -
          -
        • default
        • -
        • on and off
        • -
      • -
      • The following styles are available for the circular screen:

        +
      • +
      • Set a style and fill the check component with a text or an image according to the style:
          -
        • default
        • -
        • small
        • -
        • on and off
        • -
      -
      -elm_object_style_set(check, "on and off");
      -
      - -

      To get the current style, use the elm_object_style_get() function:

      +
    • Set a style to the check component with the elm_object_style_set() function. If you use the default style, you can skip this step.
      -char *style = elm_object_style_get(check);
      +elm_object_style_set(check, "popup");
       
    • -
    • -

      Set an icon for the rectangular screen:

      +
    • Set a label to the check component with the elm_object_text_set() function:
      -/* 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");
       
      +
    - -

    Using the Check Component

    - -

    To use the check component:

    -
      -
    • -

      Set the check component's Boolean value to true:

      -
      -elm_check_state_set(check, EINA_TRUE);
      -
    • -
    • -

      Retrieve the current value of the check component:

      +
    • Register the callback functions. +

      The following example shows how to define and register a callback for the changed signal:

      -Eina_Bool value = elm_check_state_get(check);
      -
      -
    • +evas_object_smart_callback_add(check, "changed", changed_cb, data); -
    • -

      Retrieve the content set to the check component:

      +void +changed_cb(void *data, Evas_Object *obj, void *event_info) +{ +    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n"); +} + +
    • +
+ +

The following example shows a simple use case of the check component.

+ + + + + + + + +
Example: Check use case
-/* 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 the basic EFL UI layout code */
+/* 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);
 
- - +
+

Circle check componentRect check component

+
+ + +

Styles

+

The following table lists the available component styles.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table: Check styles for rectangular devices
StyleSampleText part
defaultelm/check/base/defaultN/A
on&offelm/check/base/on&offN/A
popupelm/check/base/popupdefault
+ -

Using the Check Callbacks

+ + + + + + + + + + + + + + + + + + + + + + + + +
Table: Check styles for circular devices
StyleSampleText part
defaultelm/check/base/defaultN/A
on&offelm/check/base/on&offN/A
small popupelm/check/base/popupdefault
+ +

Callbacks

+ +

You can register callback functions connected to the following signals for a check object.

+ + + + + + + + + + + + + + + +
Table: Check callback signals
SignalDescriptionevent_info
changedThe check component value changes.NULL
-

To receive notifications about the check events, listen to the changed signal, which is called when the check component value changes.

@@ -151,25 +219,6 @@ Evas_Object *icon = elm_object_part_content_get(check, "icon");
-

The event_info callback parameter is NULL.

- -

To register and define a callback for the changed signal:

- -
-{
-    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");
-}
-
- - @@ -190,7 +239,7 @@ changed_cb(void *data, Evas_Object *obj, void *event_info) +