From: Donghyun Lee Date: Fri, 4 Dec 2015 02:45:27 +0000 (+0900) Subject: LB reviewed X-Git-Tag: tizen_3.0/TD_SYNC/20161201~292 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=88b8bde1275a5dbf71aad15a20a418de1e6fc481;p=sdk%2Fonline-doc.git LB reviewed --- diff --git a/org.tizen.devtools/html/native_tools/enventor_n.htm b/org.tizen.devtools/html/native_tools/enventor_n.htm index 2055b2b..cf6cb4d 100644 --- a/org.tizen.devtools/html/native_tools/enventor_n.htm +++ b/org.tizen.devtools/html/native_tools/enventor_n.htm @@ -65,7 +65,7 @@ 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. + 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. diff --git a/org.tizen.devtools/html/native_tools/resource_explorer_n.htm b/org.tizen.devtools/html/native_tools/resource_explorer_n.htm deleted file mode 100644 index 7bbe7e9..0000000 --- a/org.tizen.devtools/html/native_tools/resource_explorer_n.htm +++ /dev/null @@ -1,247 +0,0 @@ - - - - - - - - - - - - - Resource Manager - - - -
-
-

Mobile native

-
- - -
- -
- -

Resource Manager

- -

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.

- -

Providing Configuration-specific Alternative Resources

- -

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.

- -

Predefined Resource Directory Hierarchy

- -

The res/contents directory contains predefined directories for specific alternative resources, and the res.xml file that is referenced at application runtime.

- -

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 res/contents directory or the root directory of the contents directory.

-
-BasicUI/
-   res/
-      contents/
-         LDPI /
-               basicui.png
-         MDPI/
-            basicui.png
-         basicui.png
-         res.xml
-
- - - - - - - - - - -
Note
Always include default resources in the root directory (not in a subdirectory of the contents directory) to ensure that your application has no dependencies on a specific device configuration.
- -

A specific subdirectory is named as configuration-qualifier. 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.

- - - - - - - - - - - - - - - - - - - - -
Table: Configuration-qualifiers
Configuration-qualifier nameType valueDescription
Language and region codeFor example, en_US or en_UKThe type values have the form ll_CC, where ll stands for an ISO 639 2-letter language code, and the optionally followed CC stands for an ISO 3166 2-upper letter region code.
DPI (Dot Per Inch) densityLDPI -

MDPI

-

HDPI

-

XHDPI

-

XXHDPI

LDPI: low-dpi from 0 to 240 -

MDPI: medium-dpi from 241 to 300

-

HDPI: high-dpi from 301 to 380

-

XHDPI: extra-high-dpi from 381 to 480

-

XXHDPI: extra-extra-high-dpi from 481 to 600

- -

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.

- - - - - - - - - - - - - - - -
Table: DPI and profile factor
DPI type valueSmall screen mobile -

(profile factor: 0.7)

Large screen mobile -

(profile factor: 0.8)

LDPI -

MDPI

-

HDPI

-

XHDPI

-

XXHDPI

0 ~ 1.9 -

1.9 ~ 2.3

-

2.3 ~ 3.0

-

3.0 ~ 3.7

-

3.7 ~

0 ~ 2.1 -

2.1 ~ 2.7

-

2.7 ~ 3.4

-

3.4 ~ 4.3

-

4.3 ~

- -

The res.xml file is composed of XML elements and describes where each alternative resource is grouped into a device configuration. The following example shows a res.xml file based on the BasicUI project.

- -
-<?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>
-
- -

The res.xml file is automatically generated as part of the build packaging process by the IDE. Since editing the res.xml file manually is not easy, the IDE helps to minimize this difficulty by supporting the Resource Manager view.

- - - - - - - - - - -
Note
You cannot modify the res.xml file manually in IDE. The res.xml file is overridden by the IDE during the packaging process. You can disable the override in the project properties in the IDE (Properties > Tizen SDK > Package).
- -

Resource Manager View

-

The Resource Manager view helps you to place resources to support specific device configurations, such as different screen densities.

- -

In the Resource Manager view, you can:

- -
  • Show all resource configurations that the project provides (see the Tab and folding lists figure).
    • -
  • Create multiple configuration-qualifier directories and remove them.
    • -
  • Copy resources to an alternative directory by dragging and dropping into the view area. You can also remove resources.
    • -
  • Generate code snippets by dragging and dropping into the source editor area.
- - - - - - - - - - -
Note
If the Resource Manager view is not visible, open it by selecting Window > Show View > Other > Tizen > Resource Manager from the IDE menu.
- -

To place the rsc1.edc 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:

- -
  1. Open the Resource Configuration dialog by clicking Resource Configuration from the toolbar menu in the Resource Manager view. -

    Resource directory hierarchy

    -
    2. -
  2. Add a configuration by selecting LDPI and MDPI in the DPI combo box.
    3. -
  3. Drag the edje folder and drop it into the proper tab list view area in the Resource Manager view. - -

    The following figure shows the Tab list view (on the left) and the Folding list view (on the right) of the Resource Manager view. You can switch between the views using the buttons in the Resource Manager view toolbar menu (Switch to folding to switch to folding lists and Switch to tabs to switch to tab lists).

    - -

    Tab and folding lists

    -
- - - - - - - - - - -
Note
All images used by EDC file must be placed in the edje_res folder created by the SDK. The edje_res folder is excluded from the .tpk package file.
- -

Managing Resources in the SDK

- -

The following steps provide a quick example for managing resources in the SDK:

- -
  1. Create a BasicUI project.
    2. -
  2. Create a resource directory hierarchy and copy images into it. -

    Resource directory hierarchy and the Resource Manager

    -
    3. -
  3. Create a res.xml file with the Build Package command.
    4. -
  4. Check the res.xml file. -

    res.xml

    -
    5. -
  5. Add code for loading alternative resources by using the Resource Manager API (in mobile and wearable applications). -

    Resource Manager

    - -
    6. -
  6. Build and run the BasicUI project. -

    Output

- -

In case of predefined application layouts (edc), you can use the res.xml file manually.

- - - - - -
- -Go to top - - - - - - - diff --git a/org.tizen.devtools/html/native_tools/resource_manager_n.htm b/org.tizen.devtools/html/native_tools/resource_manager_n.htm index 4e871b6..1a99fbe 100644 --- a/org.tizen.devtools/html/native_tools/resource_manager_n.htm +++ b/org.tizen.devtools/html/native_tools/resource_manager_n.htm @@ -40,11 +40,11 @@ Note - The Resource Manager is supported only in 2.4 platform. If the Resource Manager view is not supported, check the Project Version and the Api Version in tizen-manifest.xml. + The Resource Manager tool is supported in the 2.4 platform only. If the Resource Manager view is not supported, check the version and api-version attributes in the <manifest> element of the application manifest file. - +

Providing Configuration-specific Alternative Resources

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.

@@ -181,7 +181,7 @@ BasicUI/ Note - If the Resource Manager view is not visible, open it by selecting Window > Show View > Other > Resource Manager from the IDE menu. + If the Resource Manager view is not visible, open it by selecting Window > Show View > Other > Tizen > Resource Manager from the IDE menu. diff --git a/org.tizen.devtools/html/native_tools/storyboard_n.htm b/org.tizen.devtools/html/native_tools/storyboard_n.htm index 3a6c0dd..b46df6a 100644 --- a/org.tizen.devtools/html/native_tools/storyboard_n.htm +++ b/org.tizen.devtools/html/native_tools/storyboard_n.htm @@ -25,7 +25,6 @@

Mobile native

-

Storyboard

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.

@@ -41,7 +40,7 @@ Note - The Storyboard is supported only in 2.4 platform. + The Storyboard is supported in the 2.4 platform only. @@ -112,4 +111,4 @@ - + \ No newline at end of file diff --git a/org.tizen.devtools/html/native_tools/uibuilder_n.htm b/org.tizen.devtools/html/native_tools/uibuilder_n.htm index 90e3718..bf48eb6 100644 --- a/org.tizen.devtools/html/native_tools/uibuilder_n.htm +++ b/org.tizen.devtools/html/native_tools/uibuilder_n.htm @@ -38,15 +38,15 @@

UI Builder

- - - + + + - - - -
Note
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.
+ 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. + + +

Supported Views and Editors

@@ -183,9 +183,9 @@

Palette

The palette contains EFL UI components, which you can select and add to the design area.

@@ -273,4 +273,4 @@ - + \ No newline at end of file diff --git a/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm b/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm index 9a127a4..e3b8d3c 100644 --- a/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm +++ b/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm @@ -191,10 +191,10 @@ 2.2.1 -http://tizen.org/feature/database.encryption - Specify this key, if the application requires the database encryption feature. +http://tizen.org/feature/database.encryption + Specify this key, if the application requires the database encryption feature. 2.2.1 - + http://tizen.org/feature/fmradio Specify this key, if the application requires an FM radio. @@ -360,10 +360,10 @@ 2.4 -http://tizen.org/feature/network.telephony.sms.cbs - Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature. +http://tizen.org/feature/network.telephony.sms.cbs + Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature. 2.2.1 - + http://tizen.org/feature/network.tethering Specify this key, if the application requires any kind of tethering feature. @@ -809,8 +809,8 @@ 2.2.1 -http://tizen.org/feature/database.encryption - Specify this key, if the application requires the database encryption feature. +http://tizen.org/feature/database.encryption + Specify this key, if the application requires the database encryption feature. 2.2.1 @@ -981,12 +981,12 @@ http://tizen.org/feature/network.telephony.sms Specify this key, if the application requires the SMS feature. 2.4 - + -http://tizen.org/feature/network.telephony.sms.cbs - Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature. +http://tizen.org/feature/network.telephony.sms.cbs + Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature. 2.2.1 - + http://tizen.org/feature/network.tethering Specify this key, if the application requires any kind of tethering feature. diff --git a/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm b/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm index 92a4e66..50fcc87 100644 --- a/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm +++ b/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm @@ -126,7 +126,7 @@

  1. If you have made changes to the application after testing it, rebuild the application.

  2. Select the project in the Project Explorer view.

    3. -

  3. In the project context menu, select Project > Build Package .

    4. +

  4. In the project context menu, select Project > Build Package.

diff --git a/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm b/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm index f49f5fe..3b86602 100644 --- a/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm +++ b/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm @@ -399,9 +399,9 @@ collections

If the application binary does not exist, it is built automatically for the Emulator.

If many active Emulator instances are connected, select the Emulator to run the application from the dialog box.

  • The debug messages are displayed in the IDE's Console view. To see the GDB console, in the Console view, click the Display Selected Console button and select the option containing gdb. With the GDB console, you can also execute GDB commands.

    To display verbose GDB output in the GDB console:

  • Use the application in the Emulator as you would in a target device.

    diff --git a/org.tizen.guides/html/images/widget_app_lifecycle.png b/org.tizen.guides/html/images/widget_app_lifecycle.png index d9cb91a..13fc5ef 100644 Binary files a/org.tizen.guides/html/images/widget_app_lifecycle.png and b/org.tizen.guides/html/images/widget_app_lifecycle.png differ diff --git a/org.tizen.guides/html/images/widget_instance_lifecycle.png b/org.tizen.guides/html/images/widget_instance_lifecycle.png index e76b810..2b9e9f7 100644 Binary files a/org.tizen.guides/html/images/widget_instance_lifecycle.png and b/org.tizen.guides/html/images/widget_instance_lifecycle.png differ diff --git a/org.tizen.guides/html/native/social/calendar_n.htm b/org.tizen.guides/html/native/social/calendar_n.htm index c2f53ce..ab920d6 100644 --- a/org.tizen.guides/html/native/social/calendar_n.htm +++ b/org.tizen.guides/html/native/social/calendar_n.htm @@ -553,7 +553,7 @@ long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int m    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;    } @@ -564,7 +564,7 @@ long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int m    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; diff --git a/org.tizen.guides/html/native/social/service_adaptor_n.htm b/org.tizen.guides/html/native/social/service_adaptor_n.htm index c95d918..9190aa6 100644 --- a/org.tizen.guides/html/native/social/service_adaptor_n.htm +++ b/org.tizen.guides/html/native/social/service_adaptor_n.htm @@ -41,10 +41,10 @@

    This feature is supported in mobile applications only.

    -

    Figure: Service adaptor structure

    -

    Service adaptor structure

    +

    Figure: Service Adaptor structure

    +

    Service Adaptor structure

    -

    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:

    +

    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:

    • -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);
@@ -137,88 +115,94 @@ attach_panel_set_result_cb(vd.attach_panel, __ap_result_cb, NULL);
 attach_panel_set_event_cb(vd.attach_panel, __ap_event_cb, NULL);
    +

    You only have to create the attach panel once during the application execution.

    -

    You only have to create the attach panel once during the app's execution. Its visibility can be controlled with -attach_panel_show() and attach_panel_hide() -functions. When the panel is created, it is hidden by default. The attach_panel_get_visability() -function can be used to check if the panel is visible.

    +

    You can control the attach panel visibility with the attach_panel_show() and attach_panel_hide() functions. When the panel is created, it is hidden by default. Use the attach_panel_get_visibility() +function to check whether the panel is visible.

    -

    The code snippet below shows what happens when the 'Add attachment' 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, attach_panel_show() -function is invoked to show it. The panel is hidden automatically after the user clicks the soft back key.

    +

    The following example shows what happens when the user clicks Add attachment after the attach panel has been created:

    + +
      +
    1. The panel visibility is checked. +

      If the panel is in the hidden state, the attach_panel_show() function is invoked to show it. The panel is hidden automatically after the user clicks the soft back key.

       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);
 }
-
      +
      2. -

      After the user selects or creates attachments, the __ap_result_cb() callback function is invoked. To get the files' paths, -app_control_get_extra_data_array() function has to be invoked on the -app_control_h result handle that is passed to the callback function. The selected -variable is an array of strings in which the paths will be stored.

      +
    2. After the user selects or creates attachments, the __ap_result_cb() callback function is invoked. +

      To get the file paths, the app_control_get_extra_data_array() function is invoked on the app_control_h result handle that is passed to the callback function. The selected variable is an array of strings in which the paths are stored.

      -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]);
 }
-
      +
    -

    Launching default application for viewing a file

    -

    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.

    +

    Launching the Default Application for Viewing a File

    +

    Use the App Control API to launch the default application for viewing a file defined by the URI (file path):

    -   
-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
 }
    +

    For more information about the app control usage, see the Application Control sample application and the App Control tutorial.

    diff --git a/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm index 04fe3f9..5b15c4b 100644 --- a/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm +++ b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm @@ -574,7 +574,7 @@ _message_send(appdata_s *ad)    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);    } @@ -619,4 +619,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm index 26ba28b..23c0d64 100644 --- a/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm +++ b/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm @@ -533,9 +533,9 @@ data_control_sql_set_data_id(s_info.provider, data_id);

    Source Files

    + +

    The application uses a simple MVC (Model View Controller) architecture. The constructors are:

    + + +

    You can create and view the sample application project including the source files in the IDE.

    + @@ -89,7 +86,8 @@ - +
    lib/This directory contains the external libraries (TAU library).This directory contains the external libraries (TAU library). +

    The TAU Framework is used in this sample application. TAU provides a CSS theme for common elements and manages views.
    @@ -99,10 +97,10 @@

    Defining the Application Layout

    -

    This section explains the layout of the application screens. The screens are defined in the index.html file.

    +

    The application screens are defined in the index.html file:

    -

    Application Startup

    +

    Starting the Application

    -

    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.

    +

    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.

    -

    To get information where the application was started from, use the following method:

    +

    To get information on where the application is started from, use the following method:

     /* 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) 
    {
@@ -200,7 +196,6 @@ getAppcontrolOperation: function m_getAppcontrolOperation(onError)
 
    To show the desired screen:
    
 
     /* js/main.js */
-
 switch (appControlOperation) 
 {
    /* Application opened from account settings by add new account */
@@ -219,8 +214,8 @@ switch (appControlOperation)
       }, this.v.showError);
    break;
    /* Application opened from home menu */
-   default :
-      ... 
+   default:
+      /* Take action */ 
 }
 
    
 
@@ -228,7 +223,7 @@ switch (appControlOperation)
 
 
    To manage accounts:
    
 
 
     function replyAppCaller(text)
 {
diff --git a/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm
index 0022b9f..edd0354 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm
@@ -211,8 +211,8 @@ init: function Model_init(callback)
             if (!powered) 
             {
                /* Notify that the connection is lost */
-             }
-          }
+            }
+         }
       });
 
       callback();
@@ -429,14 +429,13 @@ function ClientModel(parent)
 
    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) {}
    };
 }());
 
    
diff --git a/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
index a3dd23c..6a52839 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
@@ -197,7 +197,8 @@ function setMuted(isMuted)
 
 
     /* js/models/radio.js */
-var scanCallback = {
+var scanCallback = 
+{
    onfrequencyfound: function onFrequencyFound(frequency) 
    {
       /* Found a frequency */
diff --git a/org.tizen.sampledescriptions/html/mobile_w/newsfeed_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/newsfeed_mw.htm
index 4ee9e50..e6b395b 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/newsfeed_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/newsfeed_mw.htm
@@ -24,8 +24,8 @@
 	
 
diff --git a/org.tizen.sampledescriptions/html/mobile_w/pathtracker_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/pathtracker_mw.htm
index 9c5a9d6..70fd52d 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/pathtracker_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/pathtracker_mw.htm
@@ -24,7 +24,8 @@
 	
@@ -32,14 +33,23 @@
 
 
    
   
    PathTracker Sample Overview
    
-  
    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.
    
+  
    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.
    
   
    For information on creating the sample application project in the IDE, see Creating Sample Applications.
    
-  
    The following figure shows an example view of the destination screen and the tracker screen when the animated arrow directs you to the destination.
    
+  
    The following figure illustrates the main screens of the PathTracker.
    
   
    Figure: PathTracker screens
    
   
    PathTracker screens
    
-  
    PathTracker screens
    
-  
-  
+ 
+  
    The application opens with the splash screen, which is displayed while the GPS data for the current location is retrieved.
    
+  
    When the current location is available, the destination screen opens:
    
+  
    1. 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:
+  
        
+
      • Click Hand icon to select the manual mode.
        • 
+
      • Click Point icon to select the Google Maps mode.
        • 
+
      
+
      When you have set a destination point, the START button activates.
      2. 
+
    2. To start the path tracking, click START.
+
      The tracker screen navigates you to the destination point using an animated arrow to direct you.
       
    
+
   
    Prerequisites
    
   
   
      
@@ -59,6 +69,14 @@
      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.
      
 	
+     css/style.css
+     This file contains the CSS styling for the application UI.
+    	
+	
+     images/
+     This directory contains the images used to create the user interface.
+    	
+	
      index.html
      This is a starting file from which the application starts loading. It contains the layout of the application screens.
     
@@ -66,18 +84,6 @@
      js/
      This directory contains the application code.
     
-	
-     lib/
-     This directory contains the external libraries (TAU library).
-    
-	
-     css/style.css
-     This file contains the CSS styling for the application UI.
-    	
-	
-     images
-     This directory contains the images used to create the user interface.
-    	
 		
      js/core
      This directory contains the application framework.
@@ -88,13 +94,16 @@
     	
 		
      js/models
-     This directory contains files for implementing the application models.
+     This directory contains the files for implementing the application models.
     	
 		
      js/views
-     This directory contains files for implementing the application views.
+     This directory contains the files for implementing the application views.
     	
-
+	
+     lib/
+     This directory contains the external libraries (TAU library).
+    
    
   
 
@@ -102,13 +111,13 @@
   
      Implementation
      
 
   
-  
      Application Layout
       
+  
      Defining the Application Layout
       
   
-
      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.
      
+
      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:
      
 
-
      Defining the Destination Screen
      
+
      • Destination screen
 
-
        The following code snippet shows the arrangement of the main containers of the destination screen.
        
+
        The following code snippet shows the arrangement of the main containers of the destination screen:
        
 
         <!--index.html-->
 <div data-role="page" id="destination">
@@ -127,12 +136,7 @@
 
        To manage the containers:
        
 
          
 
        • Header
-
          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.
          
-
            
-
          • Hand icon The hand icon indicates that the manual mode is selected.
            • 
-
          • Point icon The point icon indicates that the Google Maps mode is selected.
            • 
-
          
-
          The following code snippet shows the header element in detail.
          
+
          The header element contains a title of the page and a button that allows user to change the destination input mode:
          
 
           <!--index.html-->
 <div data-role="header" data-position="fixed">
@@ -142,19 +146,16 @@
 
          
 
          • 
 
        • Content
-
          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.
          
+
          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.
          
 
 
          To display the map, the application uses a <div> element with the map 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.
          
-
-
          The following code snippet illustrates the elements of the content element that are used to show the map in detail.
          
 
           <!--index.html-->
 <div id="map"></div>
 
          
 
-
          While the <div> element with the map ID is hidden, the content element displays the <div> element with the content-data class. This element is divided into 2 parts (elements with the content-data-frame class). The first one displays the start coordinates and does not require any user action.
          
-
-
          The following example shows the element that displays the start coordinates.
          
+
          To display the manual selector, the application uses a <div> element with the content-data class. This element is divided into 2 parts (elements with the content-data-frame class):
          
+
          • The first (upper) part displays the start coordinates and requires no user action:
 
             <!--index.html-->
 <div class="content-data">
@@ -166,15 +167,12 @@
       </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>
-
            
-
-
            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 <div> element with circle-selector-frame class) placed below the digits.
            
-
-
            The following example shows the element that displays the destination coordinates
            
+
        • 
+
      • 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 <div> element with the circle-selector-frame class) placed below the digits.
 
         <!--index.html-->
 <div class="content-data">
@@ -220,11 +218,9 @@
       </div>
    </div>
 </div>
-
        
+
    
 
-
    To show the splash screen, the application uses a <div> element with the splash ID, which is a container for a message displayed in the <div> element with the splash-action ID.
    
-
-
    The following code snippet shows the elements of the content element.
    
+
    To show the splash screen, the application uses a <div> element with the splash ID, which is a container for a message displayed in the <div> element with the splash-action ID:
    
 
     <!--index.html-->
 <div id="splash" class="display-flex">
@@ -233,23 +229,20 @@
 
    
 
 
  • Footer
-
    The main screen footer contains the START button (the <a> element with the destination-start-btn ID). This button allows user to switch the application into the tracker screen.
    
+
    The footer contains the START button (the <a> element with the destination-start-btn ID), which allows the user to switch the application to the tracker screen:
    
 
-
    The following code snippet shows the footer element.
    
 
     <!--index.html-->
 <div data-role="footer" data-position="fixed">
    <a data-role="button" id="destination-start-btn" disabled="disabled">START</a>
 </div>
 
    
-
    The following figure shows the destination screen in different modes. The START button is enabled only when the coordinates of the destination point are defined.
    
-  
    PathTracker start
    
 
    • 
 
+
+
  • Tracker screen
 
-  
    Defining the Tracker Screen
    
-
-
    The following code snippet shows the arrangement of the main containers of the tracker screen.
    
+
    The following code snippet shows the arrangement of the main containers of the tracker screen:
    
 
     <!--index.html-->
 <div data-role="page" id="tracker">
@@ -262,12 +255,10 @@
 </div>
 
    
 
-
    To manage the elements:
    
+
    To manage the containers:
    
 
      
 
    • Header
-
      The header element contains only a title of the page.
      
-
-
      The following code snippet shows the header element.
      
+
      The header element contains only the title of the page:
      
 
       <!--index.html-->
 <div data-role="header" data-position="fixed">
@@ -278,15 +269,11 @@
 
      
 
      • 
 
    • Content
-
      The content element display consists of 2 elements:
      
+
      The content element has 2 parts:
      
 
        
-
      • The <div> element with the arrow ID. This element is responsible for displaying animated image of the arrow that allows app to indicate the absolute direction to the destination point.
        •  
-
      • The <div> element with the distance ID, which is used to show the absolute distance to the destination point.
        • 
+
      • The <div> element with the arrow ID is responsible for displaying an animated image of the arrow that indicates the absolute direction to the destination point.
        •  
+
      • The <div> element with the distance ID is used to show the absolute distance to the destination point.
        • 
 
      
-
-
      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 js/helpers/calculations.js module.
      
-
-
      The following code snippet shows the elements of the content element on the tracker screen.
      
 
       <!--index.html-->
 <div id="arrow"></div>
@@ -295,40 +282,38 @@
    <span id="distance-unit"></span>
 </div>
 
      
-
      The following figure shows an example view of the tracker screen.
      
-  
      PathTracker tracker
      
+
+
      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 js/helpers/calculations.js module.
      
 
      • 
-
    
+
    • 
+
 
    Accessing Geolocation Data
     
 
-
    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 js/models/geo.js module containing the set of methods that allow obtaining and operating on location data. The js/models/geo.js module is initialized after application startup.
    
+
    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 js/models/geo.js module containing a set of methods that allow obtaining and operating on the location data. The js/models/geo.js module is initialized after application startup.
    
+
 
-
    Using the watchPosition() Method
    
+
    Tracking the Position Changes
    
 
-
    When the js/models/geo.js module is initialized, the init() method is called. The following code snippet shows the initialization process of this module.
    
+
    During the js/models/geo.js module initialization, the init() method is called:
    
+
+
      
+
    1. The init() method checks whether the navigator.geolocation object exists. If it does, it is assigned to the geo global variable. The geo object is used later for all requests to the Geolocation API.
 
       /* 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();
+   }
 }
-
+
      2. 
+
    2. The application calls the startGeoWatching() method.
+
      The startGeoWatching() method uses the geo object to call the watchPosition() method from the Geolocation API, defining 2 callbacks as parameters.
      
+
      +/* js/models/geo.js */
 function startGeoWatching() 
 {
    try 
@@ -341,28 +326,43 @@ function startGeoWatching()
       onWatchPositionError(error);
    }
 }
+
      3. 
+
    3. Every time the coordinates of the current position of the device change, the first callback (onWatchPositionSuccess()) is invoked.
+
      The onWatchPositionSuccess() method takes the Position object as a parameter, extracts coordinate data from the given parameter, and fires the change.position.success event passing the extracted data to this event.
      
+
      +/* 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
+      }
+   });
 }
-
      
 
-
      The init() method checks whether the navigator.geolocation object exists. If it does, it is assigned to the geo global variable. The geo object is used later for all requests to the W3C Geolocation API. At the next step, the application calls the startGeoWatching() method.
      
+function onWatchPositionError(error) 
+{
+   console.error('GEO: onWatchPositionError()', error.message);
+}
+
    +
  • The application listens to the change.position.success event all the time while working. When the event occurs, the application performs appropriate actions on both the destination and tracker screen. +

    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.

    • -

    The startGeoWatching() method uses the geo object to call the watchPosition() from the W3C Geolocation API. It takes 2 methods as parameters. From now on, the application calls the onWatchPositionSuccess() method every time when the coordinates of the current position of the device are being changed. The onWatchPositionSuccess() method takes the Position object as parameter, extracts coordinates data form given parameter, and fires the change.position.success event passing extracted data to this event.

    -

    The application listens to the change.position.success 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 change.position.success 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.

    +

    Getting the Current Position

    -

    Using the getCurrentPosition() Method

    +

    To get the current position:

    -

    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 getCurrentPosition() method from js/models/geo.js module is called.

    +
      +
    1. Immediately after the application startup, the destination screen displays a splash screen with the 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 the device are available. The checking process starts when the getCurrentPosition() method from the js/models/geo.js module is called. -

      The following code snippet shows the init() method of the js/views/destination.js module.

       /* js/views/destination.js */
 var geo = req.models.geo, /* Geo module object */
@@ -375,10 +375,14 @@ function init()
    setSplashScreenText(SPLASH_GPS_DATA);
    geo.getCurrentPosition();
 }
-
      +
      2. + +
    2. The getCurrentPosition() method from the js/models/geo.js module calls the getCurrentPosition() method from the Geolocation API. This method allows the application to obtain the current coordinates of the device location. + +

      The getCurrentPosition() method takes 2 callbacks as parameters, called in case of success or error:

      +
      • The onGetCurrentPositionSuccess() success callback takes the Position object as parameter, extracts coordinates data from the given parameter, and fires the start.position.success event passing the extracted data to the event.
        • +
      • The onGetCurrentPositionError() error callback fires the start.position.error event passing the obtained error object to the event.
      -

      The getCurrentPosition() method from the js/models/geo.js module calls the getCurrentPosition() method from the W3C Geolocation API. This method allows the application to obtain current coordinates of the device location.

      -

      The following code snippet shows what happens when the getCurrentPosition() method is called.

       /* js/models/geo.js */
 function onGetCurrentPositionSuccess(position) 
@@ -417,13 +421,9 @@ return
 {
    getCurrentPosition: getCurrentPosition
 };
-
      - -

      The getCurrentPosition() method takes 2 methods as parameters. These are the callbacks that are called in case of success or error. The onGetCurrentPositionSuccess() method takes the Position object as parameter, extracts coordinates data form a given parameter and fires the start.position.success event passing extracted data to this event. In case of error, the application calls the onGetCurrentPositionError() method that fires the start.position.error event passing obtained error object to this event.

      - -

      The js/views/destination.js module waits for the start.position.success event to call the onStartPositionSuccess() method and finish the initialization of the destination screen.

      +
      3. -

      The following snippet shows the onStartPositionSuccess() in details.

      +
    3. The js/views/destination.js module waits for the start.position.success event to call the onStartPositionSuccess() method and finish the initialization of the destination screen: 
       /* js/views/destination.js */
 function onStartPositionSuccess(ev) 
@@ -434,13 +434,18 @@ function onStartPositionSuccess(ev)
       systeminfo.checkNetworkType();
    }
 }
-
      +
      4. + +
    4. If the destination screen is active, the application modifies the message displayed on the splash screen to Waiting for network data and calls the checkNetworkType() method from the js/models/systeminfo.js module. -

      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 checkNetworkType() method from the js/models/systeminfo.js module.

      +

      The application uses the getPropertyValue() method from the System Information API to obtain information about the type of the available network. As a result of the getPropertyValue() method, 2 types of events can be fired:

      +
        +
      • When the onGetPropertyValueSuccess() success callback is called, the application saves the obtained network type and fires the network.checked event.
        • +
      • When the onGetPropertyValueError() error callback is called, the application fires the network.not.checked event.
        • +
      -

      The following code snippet shows what happens when the checkNetworkType() method is called.

      -// js/views/destination.js
+/* js/views/destination.js */
 var networkType = 'NONE';
 
 function setNetworkType(network) 
@@ -477,13 +482,14 @@ return
 {
    checkNetworkType: checkNetworkType,
 };
-
      +
      5. + +
    5. The js/views.destination.js module expects both the network.checked and network.not.checked events. -

      The application uses the getPropertyValue() 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 getPropertyValue() method, 2 types of events can be fired. When the onGetPropertyValueSuccess() method is called, the application saves the obtained network type and fires the network.checked event. When the onGetPropertyValueError() method is called, the application fires the network.not.checked event. Both of them are expected by the js/views.destination.js module.

      +

      No matter which event occurs, the application calls the startUI() method. The difference is that, in case of the network.checked event, the application additionally calls the isGoogleService() method from the js/models/systeminfo.js module to check the information about the saved network type and about the window.google object availability. When the mapsEnabled attribute of the object passed as a parameter to the startUI() method is true, the application displays the map selector on the destination screen. Otherwise, it displays the manual selector.

      -

      The following code snippet shows what happens when described above events occur.

      -// js/views/destination.js
+/* js/views/destination.js */
 function startUI(params) 
 {
    if (params && params.mapsEnabled) 
@@ -498,18 +504,12 @@ function startUI(params)
 
 function onNetworkChecked() 
 {
-   startUI(
-   {
-      mapsEnabled: systeminfo.isGoogleService()
-   });
+   startUI({mapsEnabled: systeminfo.isGoogleService()});
 }
 
 function onNetworkNotChecked() 
 {
-   startUI(
-   {
-      mapsEnabled: false
-   });
+   startUI({mapsEnabled: false});
 }
 
 e.listeners(
@@ -518,9 +518,7 @@ e.listeners(
    'models.systeminfo.network.not.checked': onNetworkNotChecked
 });
      - -

      No matter which event occurs, the application finally calls the startUI() method. The difference is that in case of the network.checked event the application additionally calls the isGoogleService() method from the js/models/systeminfo.js module to check the information about the saved network type and about the window.google object availability. When the mapsEnabled attribute of the object passed as a parameter to the startUI() method has the true value, the application displays the map selector on destination screen. Otherwise it displays the manual selector.

      - +
    diff --git a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm index 6d556ba..9d0daee 100644 --- a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm +++ b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm @@ -242,7 +242,7 @@ NewsFeed Demonstrates how you can send requests and receive XML format data using: @@ -256,7 +256,7 @@ PathTracker - Demonstrates how you can create a Web application that gives the you the direction to your destination using: + Demonstrates how you can create a Web application that gives you the direction to your destination using: 
     /* js/helpers/lifecycle.js */
-
 function initPage(page, initSceneFn, renderSceneFn) {}

    This method detects whether the page is displayed or hidden. If it is displayed, the renderSceneFn() method is called in a loop to make the 3D animation. Otherwise, the loop is stopped.

    @@ -161,7 +158,6 @@ function initPage(page, initSceneFn, renderSceneFn) {}
  • Add page listeners in the initPage() method: 
     /* js/helpers/lifecycle.js */
-
 page.addEventListener('pageshow', onPageShow, false);
 page.addEventListener('pagehide', onPageHide, false);
    • @@ -169,7 +165,6 @@ page.addEventListener('pagehide', onPageHide, false);

    The onPageShow() method checks whether the page was initialized and, if not, initializes it, and starts the animation loop by setting the animationRunning variable to false. The onPageHide() method stops the animation loop by setting the animationRunning variable to true.

     /* js/helpers/lifecycle.js */
-
 var sceneInitialized = false,
     animationRunning = false;
 
@@ -197,7 +192,6 @@ function onPageHide()
 
 
     /* js/helpers/lifecycle.js */
-
 var timestamp = 0, /* Timestamp of last scene rendering */
     animationRunning = false, /* Indicates whether the animation is running */
     renderSceneFn = null, /* Rendering method */
@@ -225,7 +219,6 @@ function animate()
 
    To create the scene, which is a container for the 3D objects:
    
 
     /* js/views/cube.js */
-
 var scene = null;
 
 function createScene() 
@@ -237,7 +230,6 @@ function createScene()
 
    To create the camera and set its initial position:
    
 
     /* js/views/cube.js */
-
 var camera = null;
 
 function createCamera() 
@@ -252,7 +244,6 @@ function createCamera()
 
    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:
    
 
     /* js/views/cube.js */
-
 var content = null, /* Content of the page (HTML div) */
     renderer = null;
 
@@ -277,7 +268,6 @@ function createRenderer()
 
    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.
    
 
     /* js/views/cube.js */
-
 var page = null; /* Reference to the page HTML element */
 
 function initScene() 
@@ -339,7 +329,6 @@ function createCube()
 
    To create a textured cube, you must create a different type of material using the THREE.MeshFaceMaterial() method. The following method creates a material of the cube built from 3 textures:
    
 
     /* js/views/cube.js */
-
 var texturedMaterial; /* Here is textured material */
 
 function initTexturedMaterial() 
@@ -368,7 +357,6 @@ function initTexturedMaterial()
 
 
     /* js/views/cube.js */
-
 function createTexturedCube() 
 {
    var geometry = new THREE.BoxGeometry(EDGE_LENGTH, EDGE_LENGTH, EDGE_LENGTH);
@@ -414,7 +402,6 @@ function rotationStep()
 
    1. 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:
 
       /* js/views/light.js */
-
 var FLOOR_SIZE = 2000,
     FLOOR_COLOR = 0x076100;
 
@@ -436,7 +423,6 @@ function createFloor()
 
    2. 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:
 
       /* js/views/light.js */
-
 var CUBE_COLOR = 0xff0000,
     CUBE_EDGE_LENGTH = 100;
 
@@ -458,7 +444,6 @@ function createCube()
 
      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).
      
 
       /* js/views/light.js */
-
 var AMBIENT_LIGHT_COLOR = 0x5,
     DIRECTIONAL_LIGHT_COLOR = 0xdfebff,
     DIRECTIONAL_LIGHT_INTENSITY = 0.75,
@@ -482,7 +467,6 @@ function createLights()
 
    3. To see the shadows on the scene, the renderer must be properly configured. The following method sets 3 parameters of the created renderer: the shadowMapEnabled enabling shadows, and the shadowMapType and shadowMapSoft that make the shadows smooth.
 
       /* js/views/light.js */
-
 function createRenderer() 
 {
    renderer = new THREE.WebGLRenderer({antialias: true});
@@ -498,7 +482,6 @@ function createRenderer()
 
      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:
      
 
       /* js/views/camera.js */
-
 var centerPoint = 
     {
        x: 0,
@@ -525,7 +508,6 @@ function recalculatePositions()
 
      Call the above method in the render() method:
      
 
       /* js/views/camera.js */
-
 function render() 
 {
    recalculatePositions();
@@ -541,7 +523,6 @@ function render()
 
      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:
      
 
       /* js/views/camera.js */
-
 function loadModel3D(path, scale) 
 {
    new THREE.JSONLoader().load(path,
diff --git a/org.tizen.sampledescriptions/html/wearable_w/filemanager_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/filemanager_ww.htm
new file mode 100644
index 0000000..69b0509
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_w/filemanager_ww.htm
@@ -0,0 +1,1109 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    FileManager Sample Overview
+
+
+
+
+
      
+    
      
+        
      Wearable Web
      
+    
      
+    
      
+        
      Related Info
      
+        
+    
      
+
      
+
+
      
+
+
      FileManager Sample Overview
      
+
+
      The FileManager sample application demonstrates how you can read and modify the content of the device file system.
      
+
      For information on creating the sample application project in the IDE, see Creating Sample Applications.
      
+
      The following figure illustrates the main screens of the FileManager.
      
+
      Figure: FileManager screens
      
+
      FileManager screens
      
+
      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).
      
+
+
      On a files page, you can open the menu to perform various operations:
      
+
+
        
+
      • Create new folders or files
        • 
+
      • Rename folders or files
        • 
+
      • Delete folders or files
        • 
+
      • Copy, cut, and paste files
        • 
+
      • Display information about a file
        • 
+
      • Open the breadcrumb navigation mode
        • 
+
      
+
+
      To open a file, select it from the screen.
      
+
+  
      Prerequisites
       
+  
      To ensure proper application execution, the following privileges must be set:
      
+  
      • http://tizen.org/privilege/filesystem.write
        • 
+  
      • http://tizen.org/privilege/filesystem.read
        • 
+  
      • http://tizen.org/privilege/application.launch
      
+
+
      Source Files
      
+
+
      You can create and view the sample application project including the source files in the IDE.
      
+
+
      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 core.js file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.
      
+
+
+    
+        
+            
+            
+        
+        
+            
+            
+        
+        
+            
+            
+        
+        
+            
+            
+        
+        
+            
+            
+        
+        
+            
+            
+        
+        
+            
+            
+        		
+        
+            
+            
+        
+        
+            
+            
+        
+    
+
      File nameDescription
      config.xmlThis 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.
      css/This directory contains the CSS styling for the application UI.
      index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
      js/This directory contains the application code.
      js/core/This directory contains the application framework.
      js/helpers/This directory contains the helper functions for the DOM manipulation.
      js/models/This directory contains the application model modules.
      js/views/This directory contains the files that implement the application views.
      
+
+
+
      Implementation
      
+
+
      Defining the Application Layout
      
+
+
      To define the application layout:
      
+
+
      1. 
+
        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:
        
+
+
        +<!--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>
+
        
+
+
        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 storages-list-content.tpl template file:
        
+
+
        +<!--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}}
+
        2. 
+
+
+
      2. 
+
        The files page displays a list of files and folders located in the given folder. The page also contains a menu 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:
        
+
+
        +<!--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>
+
        
+
        The file list content is built from the file-list-content.tpl template file:
        
+
+
        +<!--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}}
+
        
+
        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:
        
+
        +<!--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>
+
        
+
+
        3. 
+
      3. 
+
        The file info page displays details about a file or folder. The layout consists of a header and a list of file properties:
        
+
+
        +<!--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>
+
        
+
        4. 
+
      4. 
+
        The breadcrumb navigation page displays a list of parent folders of the specified file or folder:
        
+
+
        +<!--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>
+
        
+
        The navigation list content is built from the navigation-list-content.tpl template file:
        
+
+
        +<!--navigation-list-content.tpl-->
+{{#items}}
+   <li><a href="#" data-path="{{this.path}}">{{this.name}}</a></li>
+{{/items}}
+
      
+
+
+
      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.
      
+
+
      To define the menu module:
      
+
+
        
+
      1. Define an empty module named helpers/menu and save it in the js/helpers folder.
+
        The module publishes the API consisting of the following methods:
        
+
        • initializeMenu(): Checks the screen type and initializes the suitable HTML menu element. This method gets the menuHandlerId parameter, which is an ID of the button that opens the popup menu.
          • 
+
        • bindMenuClickEventListener(): Allows you to bind a callback to the specified menu item identified by the class name.
          • 
+
        • setItemHidden(): Allows you to hide or unhide a menu item identified by its class name.
        
+
+
        +/* 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
+   };
+});
+
        
+
        2. 
+
      2. Implement the initializeMenu() method.
+
        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 initializeForCircularScreen() method.
        
+
        +/* 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);
+   }
+}
+
        3. 
+
      3. Implement the initializeForCircularScreen() method:
+
        1. Define local variables:
+
          +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 */
+
          2. 
+
        2. 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.
+
          +   page.addEventListener('pagebeforeshow', function onPageBeforeShow() 
+   {
+      selectorWidget = tau.widget.Selector(selectorEl, 
+      {
+         itemRadius: window.innerHeight / 2 * 0.8
+      });
+   });
+
+   page.addEventListener('pagebeforehide', function onPageBeforeHide() 
+   {
+      selectorWidget.destroy();
+   });
+
          3. 
+
        3. Register the event listener for the page show. 
+
          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 menuListeners object, and the callbacks are added there by calling the bindMenuClickEventListener() method.
          
+
          The menu item callback is not invoked immediately, but only under the following circumstances:
          
+
          • Callback must exist (not null)
            • 
+
          • Item must be enabled (cannot have the hidden class)
            • 
+
          
+
          The popup is closed when the selector indicator from the selector component is clicked.
          
+
          +   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);
+   });
+
          4. 
+
        4. Register the popup hide event listener:
+
          +   popup.addEventListener('popuphide', function onPopupHide() 
+   {
+      if (typeof popupHideCallback === 'function') 
+      {
+         popupHideCallback();
+         popupHideCallback = null;
+      }
+   });
+}
+
        4. 
+
      4. Implement the bindMenuClickEventListener() method.
+
        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.
        
+
        For the circular screen devices, the listener is added to the menuListeners map. For the rectangular screen devices, it is registered as a click event listener on the related menu item.
        
+
        +/* 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);
+   }
+}
+
        5. 
+
      5. Implement the setItemHidden() method. It retrieves the menu item element from the DOM and adds or removes the hidden class from the element.
+
        +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');
+   }
+}
+
      
+
+
      Managing Storages
      
+
+
      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:
      
+
+
        
+
      1. Retrieve the storage list:
+
          
+
        1. Storages are retrieved by calling the tizen.filesystem.listStorages() method, which uses the getStorages() method from the Core framework to return the storage list in the Promise object:
+
+
          +/* 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 */
+         }
+      });
+   });
+}
+
          
+
          All asynchronous filesystem operations in this sample are wrapped in Promise objects. For more information on Promise objects, see MDN Promise and Writing Promise-Using Specifications.
          
+
          2. 
+
+
        2. The getStorages() method is used in the models/filesystem module:
+
          +/* js/models/filesystem.js */
+function getStorages() 
+{
+   return fs.getStorages().then(filterStorages).then(categorizeStorages);
+}
+
          
+
          3. 
+
        3. Storages are filtered and categorized after retrieval. The filtering excludes storages that are private, unmounted, or have an empty label:
+
          +/* 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;
+}
+
           
+
          Storages are displayed on the main page in the form of 2 lists: internal and external storages. The categorization divides storages into these lists:
          
+
          +/* 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
+   };
+}
+
          
+
          4. 
+
        2. 
+
      2. Display the storage list on the main page:
+
          
+
        1. Call the getStorages() method defined above:
+
          +/* js/views/main.js */
+filesystem.getStorages().then(onGetStorages, showErrorPopup);
+
          
+
          2. 
+
        2. Define the onGetStorages() callback, which was used above:
+
          +/* js/views/main.js */
+function onGetStorages(storages) 
+{
+   reloadStoragesList(storages);
+}
+
          
+
          3. 
+
        3. Define the reloadStoragesList() method that creates HTML content of the storage list on the main page:
+
          +/* 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);
+}
+
          
+
          The storagesList variable is a reference to the storage list element on the page. This method prepares the parameter of the storages-list-content.tpl template and generates HTML content using this template. The generated content is attached to the list.
          
+
          4. 
+
        
+
        3. 
+
      3. Monitor storage state changes:
+
          
+
        1. The storages are refreshed on the page when their state changes. The storage change listener is registered in the initialization process:
+
          +/* js/models/filesystem.js */
+function init() 
+{
+   tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
+}
+
          
+
          2. 
+
        2. The onStorageStateChanged() callback fires an event with the list of storages after change. The event is handled by the main view. 
+
          +/* js/models/filesystem.js */
+var events = ...; /* Reference to the event module from the Core framework */
+
+function onStorageStateChanged(storages) 
+{
+   events.fire('storages.changed', {storages: storages});
+}
+
          
+
          3. 
+
        3. To update the main page, define the listener method that handles the storage state change events. The reloadStoragesList() method was defined earlier.
+
          +/* js/views/main.js  */
+function onStoragesChanged(ev) 
+{
+   reloadStoragesList(ev.detail);
+}
+
          
+
          The listener creates the storage list content by using the template and sets the content to the list.
          
+
          4. 
+
        4. Register the listener:
+
          +/* js/views/main.js */
+events.listeners(
+{
+   'models.filesystem.storages.changed': onStoragesChanged
+});
+
          
+
          5. 
+
        
+
      
+
+
      Navigating the File System
      
+
+
      Navigation over the file system tree is available in the files view. This view displays the content of a folder named the current folder. 
      
+
      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.
      
+
+
        
+
      1. Define the js/models/state.js 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.
+
        +/* 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
+   };
+});
+
        
+
        2. 
+
      2. Get the list of files using the getFiles() method from the models/filesystem module:
+
        +/* js/models/filesystem.js */
+function getFiles(path, includeHiddenFiles) 
+{
+   return getDirectory(path).then(function onGetFileListHandler(dir) 
+   {
+      return listFiles(dir, !!includeHiddenFiles);
+   });
+}
+
        
+
        The method gets as input parameters the path of the folder and the flag indicating whether hidden files are included.
        3. 
+
      3. The getDirectory() method is used to obtain the File instance of the folder containing the desired files. This method calls the resolveFile() method from the Core framework:
+
        +/* 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');
+   });
+}
+
        
+
        4. 
+
      4. When you have the File instance of the folder, the getFiles() method calls the listFiles() method that retrieves the files from this folder and filters them:
+
        +/* 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);
+   });
+}
+
        
+
+
        5. 
+
      5. Define the filterFiles() 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 false.
+
        +/* 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;
+}
+
        
+
        Afterwards, pass the filter objects to the files view.
        
+
        6. 
+
      6. Display the files of a folder on the screen:
+
        1. Define the reloadPage() 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.
+
          +/* js/views/files.js */
+function reloadPage() 
+{
+   filesystem
+      .getFiles(state.getCurrentPath(), state.getHiddenFilesVisible())
+      .then(onGetFilesSuccess, onGetFilesError);
+}
+
          
+
          In the above method, the filesystem variable is a reference to the models/filesystem module and the state variable is a reference to the models/state module.
          
+
          2. 
+
        2. Define the onGetFilesSuccess() callback that sorts the received files and calls the reloadFileList() method to render the files in the list:
+
          +/* 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});
+}
+
        
+
        7. 
+
      7. Open a folder when the user clicks on it:
+
        1. Add the click event listener on the file list:
+
          +/* js/views/files.js */
+fileList.addEventListener('click', onFileListClick);
+
+function onFileListClick(ev) 
+{
+   onListElementClick(ev);
+}
+
          2. 
+
        2. Implement a method that is called when the list item is clicked. This method checks whether the clicked item has the data-directory attribute set to true. If so, the folder referred by this item is opened by the openDirectory() method.
+
          +/* 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 
+      {}
+   }
+}
+
          3. 
+
        3. Implement the openDirectory() method. This method sets the current folder path in the application state and reloads the page using the reloadPage() method described previously.
+
          +/* js/views/files.js */
+function openDirectory(name) 
+{
+   state.setCurrentPath(getNodePath(name));
+   reloadPage();
+}
+
          4. 
+
        4. Implement the getNodePath() 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:
+
          +/* js/views/files.js */
+function getNodePath(fileName) 
+{
+   return state.getCurrentPath() + filesystem.SEPARATOR + fileName;
+}
+
          
+
        
+
+
        8. 
+
      
+
+
      Creating Files and Folders
      
+
+
      To create files and folders, use the createFile() and createDirectory() methods from the models/filesystem module:
      
+
      +/* 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);
+   });
+}
+
      
+
+
      The above methods get a full path of the node that is to be created and return a Promise object that creates the node. To create a node, its parent folder is resolved by the getDirectory() method and the createFile() or createDirectory() method from the Filesystem API if called on the parent folder object.
      
+
+
      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 generateName() method:
      
+
+
      1. The generateName() 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 current/directory/path/File. If such a file does not exist in the filesystem, the path is unique, and the method returns it.
        2. 
+
      2. 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.
+
        For example, if the current/directory/path/File file exists in the filesystem and the generateName() method gets the current/directory/path/File string as an input parameter, it returns current/directory/path/File (1).
        
+
        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 current/directory/path/File (1) string and such a file exists, the returned string is not current/directory/path/File (1) (1), but current/directory/path/File (2).
      
+
+
      The following code illustrates the implementation of the generateName() method. Firstly, a regular expression checks whether the given path ends with the " (n)" string. If so, the n is extracted to the nr variable. If not, the nr variable is equal to 0. Secondly, the tryGenerateName() method is called to generate a unique name.
      
+
      +/* 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);
+}
+
      
+
+
      The tryGenerateName() method gets as input parameters the parent folder path, the file name, and the nr variable. These 3 parameters create a full path of generated name in the following way: path/prefix (nr).
      
+
+
      The method increments the nr as long as the generated name is not unique. Checking whether the generated path is unique is made by resolving it using the fs.resolveFile() method. If a NotFoundError exception is thrown, the file does not exist, and the generated path is unique. Otherwise, the tryGenerateName() method is called recursively with the nr parameter increased each time.
      
+
      +/* 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;
+      }
+   });
+}
+
      
+
+
      Deleting Files and Folders
      
+
+
      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).
      
+
+
      1. Use the deleteFiles() method to removes nodes (files or folders) identified by the paths passed as an input parameter:
+
        +/* 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);
+   });
+}
+
        
+
        2. 
+
      2. To delete a node, the File instance of its parent folder is needed. The method above retrieves such an instance and passes it to the deleteFileListInDirectory() method, which removes the nodes:
+
        +/* 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);
+   });
+}
+
        
+
        3. 
+
      3. The removal is executed by the fs.deleteDirectory() and fs.deleteFile() methods of the fs module from the Core framework:
+
        +/* 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);
+   });
+}
+
        
+
      
+
+
      Copying and Moving Files
      
+
+
      Copying and moving is implemented in the models/filesystem module by the copyFiles() and moveFiles() methods.
      
+
+
      This section illustrates the copy process. The move process is implemented in a similar way.
      
+
+
      To copy files from specified locations (originPaths parameter) to the specified folder (destinationPath parameter), the File instance of the parent folder of the source path is needed. It is retrieved and passed to the copyFileListFromDirectory() method:
      
+
      +/* 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);
+   });
+}
+
      
+
      The copyFileListFromDirectory() 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.
      
+
+
      The copy step of the method is implemented by the copyTo() method, which calls the generateName() method to ensure that the specified destination path is not occupied, and if so, generates a free one.
      
+
      +/* 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);
+      });
+   });
+}
+
      
+
+
      Renaming a File or Folder
      
+
      To change the name of a file or folder, call the moveTo() method on the File instance referencing the parent folder of the renamed element:
      
+
      +/* 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);
+      });
+   });
+}
+
      
+
+
+
+
+
+
+
      
+
+Go to top
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_w/metaldetector_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/metaldetector_ww.htm
index 1d10ae3..d2a6fc4 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/metaldetector_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/metaldetector_ww.htm
@@ -24,6 +24,7 @@
 	
      
 		
      Related Info
      
 		
 	
      
@@ -31,11 +32,14 @@
 
 
      
   
      MetalDetector Sample Overview
       
-
      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.
       
+
      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.
       
 
      For information on creating the sample application project in the IDE, see Creating Sample Applications.
       
- 
      The following figure shows the main application screens displaying the example values and directions of the measured magnetic field.
       
-  
      Figure: MetalDetector screens
       
-  
      MetalDetector screens 
       
+ 
      The following figure illustrates the main screen of the MetalDetector.
       
+  
      Figure: MetalDetector screen
       
+  
      MetalDetector screen
      
+
      MetalDetector error
       
+  
+  
      The application opens with the main screen that displays example values and directions of the measured magnetic field.
      
 
   
      Prerequisites
      
   
@@ -55,11 +59,27 @@
      config.xml 
      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. 
      
+	
+    css/style.css
+    This file contains the CSS styling for the application UI.
+  	
+      
+     images/ 
+     This directory contains the images used to create the user interface. 
+       
      
      index.html 
      This is a starting file from which the application starts loading. It contains the layout of the application screens. 
      
 	 
+     js/app.js 
+     This file contains the functions responsible for back key and low battery handling. 
+    	
+     
+     js/core/ 
+     This directory contains the application framework. 
+     	
+	 
      js/helpers/calculations.js 
      This file contains the helper for necessary calculations. 
       
@@ -67,30 +87,15 @@
      js/models/magnetic.js 
      This file contains the module for managing the magnetic sensor. 
      
-	 
-     js/app.js 
-     This file contains functions responsible for back key and low battery handling. 
-    
+
      
      js/views/main.js 
-     This file contains functions for implementing the application views and handling the application events. 
+     This file contains the functions for implementing the application views and handling the application events. 
      
      
      lib/tau/ 
      This directory contains the external libraries (TAU library). 
      	
-	
-    css/style.css
-    This file contains the CSS styling for the application UI.
-  
-     
-     images/ 
-     This directory contains the images used to create the user interface. 
-       
-     
-     js/core/ 
-     This directory contains the application framework. 
-     
     
    
   
@@ -98,15 +103,14 @@
 
 
      Application Layout
       
 
-
      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.
      
-
-
      Defining the Main Working Space
      
+
      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:
      
 
-
      The main working space contains 3 elements. To be positioned centrally to the UI, each of them is wrapped by a div element with the frame class.
      
+
      • Main working space
+
        The main working space contains 3 elements. To be positioned centrally to the UI, each of them is wrapped by a div element with the frame class:
        
 
          
-
        • The div element with the pointer 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.
          • 
-
        • The div element with the border ID that is responsible for the graphical presentation of the strength of the detected magnetic field. In fact the pointer div element is covered by a border 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.
          • 
-
        • The div element with info ID is responsible for displaying the calculated value of the strength of the detected magnetic field.
          • 
+
        • The div element with the pointer 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.
          • 
+
        • The div element with the border ID is responsible for the graphical presentation of the strength of the detected magnetic field. In fact, the pointer div element is covered by a border 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.
          • 
+
        • The div element with the info ID is responsible for displaying the calculated value of the strength of the detected magnetic field.
          • 
 
        
 
         <!--index.html-->
@@ -129,11 +133,10 @@
       </div>
    </section>
 </div>
-
        
-
-
        Defining the Error Popup
        
+
      4. 
+
    4. Error popup
 
-
      The following code snippet shows the arrangement of the elements of the error popup.
      
+
      The error popup is defined according to the TAU library popup template. It contains an error message in the content area and an OK button in the footer:
      
 
       <!--index.html-->
 <div class="ui-page">
@@ -146,17 +149,12 @@
 </div>
 
      
   
-
      The alert popup is defined according to the TAU library popup template. The following figure shows the popup with an example error message.
      
-
-  
      Figure: MetalDetector error
       
-  
      MetalDetector error 
       
-  
-
      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 OK button is pressed.
      
+
      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 OK button is pressed.
      5. 
 
 
 
      Accessing Sensor Data
      
 
-
      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.
      
+
      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.
      
 
 
      To access the sensor data:
      
 
        
@@ -188,14 +186,14 @@ function init()
 }
 
      
 
-
      The application tries to access the SensorService. The sensorService interface provides methods to access the different types of sensors supported by device. If the SensorService is available, the application calls the getDefaultSensor() method with the MAGNETIC string as a parameter. In case of failure, the application fires the not.supported event and shows the alert popup (mentioned in previous chapter). If successful, the application gains access to the Sensor object from Sensor API and calls the startSensor() method on it to obtain the value that is currently returned by the magnetic sensor.
      
+
      The application tries to access the sensor service. The sensorService interface provides methods to access the different types of sensors supported by device. If the sensor service is available, the application calls the getDefaultSensor() method with the MAGNETIC string as a parameter. In case of failure, the application fires the not.supported event and shows the error popup. If successful, the application gains access to the Sensor object from Sensor API and calls the startSensor() method on it to obtain the value that is currently returned by the magnetic sensor.
      
 
      5. 
 
    5. Start the application.
 
      The start() method from the Sensor API takes 2 parameters:
      
 
        
-
      • The onSensorStartSuccess() success callback which sets the isSensorStarted flag value to true and sets magnetic sensor change listener. As a result after each sensor value change the onGetSuccess() method is called and the model.magnetic.update event is fired. This event delivers the current sensor data and is listened by the main view module to update the UI.
        • 
+
      • The onSensorStartSuccess() success callback sets the isSensorStarted flag value to true and registers the magnetic sensor change listener. As a result, after each sensor value change, the onGetSuccess() method is called and the model.magnetic.update event is fired. This event delivers the current sensor data and is listened to by the main view module to update the UI.
        • 
 
-
      • The onSensorStartError() error callback which sets the isSensorStarted flag value to false and fires the model.magnetic.error event. This event is listened by the main view module to display the error popup if necessary.
        • 
+
      • The onSensorStartError() error callback sets the isSensorStarted flag value to false and fires the model.magnetic.error event. This event is listened to by the main view module to display the error popup, if necessary.
        • 
 
      
 
       /* js/models/magnetic.js */
@@ -229,7 +227,7 @@ function startSensor()
 
      
 
      6. 
 
    6. Update the magnetic event information.
-
      When the model.magnetic.update event occurs, the onMagneticUpdate() method form the main view module is called.
      
+
      When the model.magnetic.update event occurs, the onMagneticUpdate() method from the main view module is called.
      
 
       /* js/views/main.js */
 function onMagneticUpdate(event) 
@@ -247,7 +245,7 @@ function onMagneticUpdate(event)
 
      
 
      7. 
 
    7. Obtain the vector values.
-
      Obtain 3 vectors of the magnetic sensor value. The application uses the count3dVectorLength() method form the js/helpers/calculations.js module to calculate the result vector.
      
+
      Obtain 3 vectors of the magnetic sensor value. The application uses the count3dVectorLength() method from the js/helpers/calculations.js module to calculate the result vector.
      
 
       /* js/views/main.js */
 function count3dVectorLength(x, y, z) 
@@ -256,7 +254,7 @@ function count3dVectorLength(x, y, z)
 }
 
      
 
-
      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.
      
+
      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.
      
 
 
      The setValue() method takes the value calculated by the count3dVectorLength() method and simply updates the div element with the info ID.
        
 
      @@ -275,7 +273,7 @@ function init()
 
      
 
      8. 
 
    8. Calculate the result.
-
      The setPointerRotation() method takes the coordinates of the 2 vectors (x and y) and uses the Math.atan2() method to calculate the angle in radians between the given point (x, y) and the positive OX axis. The calculated value is used to set the webkit-transform CSS attribute what allows to rotate the div element with the pointer ID.
      
+
      The setPointerRotation() method takes the coordinates of the 2 vectors (x and y) and uses the Math.atan2() method to calculate the angle in radians between the given point (x, y) and the positive OX axis. The calculated value is used to set the webkit-transform CSS attribute that allows you to rotate the div element with the pointer ID.
      
 
       /* js/views/main.js */
 var pointer = null;
@@ -328,7 +326,7 @@ function init()
 }
 
      
   
-
      This method is based on 3 constant values. The LOWER_THRESHOLD and UPPER_THRESHOLD constant values determine the working range for the border element.
      
+
      This method is based on 3 constant values. The LOWER_THRESHOLD and UPPER_THRESHOLD constant values determine the working range for the border element:
      
 
        
 
      • When the given value is lower than the LOWER_THRESHOLD, 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 MIN_POINTER_THICKNESS constant value to ensure a minimum of the pointer element visibility.
        • 
 
diff --git a/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
index 51ccc97..cd0bcff 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
@@ -130,6 +130,14 @@
       
      
     
 
+ 
+  FileManager
+    Demonstrates how you can read and modify the content of the device file system using:
+      
+    
+
 	
 		HeartRateMonitor
 		Demonstrates how you can measure the device user's current heart rate using:
diff --git a/org.tizen.sampledescriptions/index.xml b/org.tizen.sampledescriptions/index.xml
index 9751ec6..4147e91 100644
--- a/org.tizen.sampledescriptions/index.xml
+++ b/org.tizen.sampledescriptions/index.xml
@@ -60,6 +60,7 @@
 			
 			
 			
+			
 			
 			
 			
@@ -83,6 +84,7 @@
 			
 			
 			
+			
 			
 			
 			
@@ -127,7 +129,7 @@
 			
 			
 			
-			
+			
 			
 			
 			
@@ -177,6 +179,7 @@
 			
 			
 			
+			
 			
 			
 				
diff --git a/org.tizen.tutorials/html/images/bluetooth_onoff.png b/org.tizen.tutorials/html/images/bluetooth_onoff.png
index f3bd781..74284ec 100644
Binary files a/org.tizen.tutorials/html/images/bluetooth_onoff.png and b/org.tizen.tutorials/html/images/bluetooth_onoff.png differ
diff --git a/org.tizen.tutorials/html/images/bluetooth_visibility.png b/org.tizen.tutorials/html/images/bluetooth_visibility.png
index e1cf2c6..8dcbf1b 100644
Binary files a/org.tizen.tutorials/html/images/bluetooth_visibility.png and b/org.tizen.tutorials/html/images/bluetooth_visibility.png differ
diff --git a/org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm
index 9998a2a..7de0a37 100644
--- a/org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm
@@ -110,7 +110,7 @@ init_alarm()
    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");
 
      9. 
 
      9. 
 
diff --git a/org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm
index ea52f72..ec01d02 100644
--- a/org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm
@@ -66,7 +66,7 @@
 
       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);
 
      
 
 
    9. 
@@ -75,11 +75,11 @@ if (ret != APP_CONTROL_ERROR_NONE)
 
       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);
 
      
 
 
      For more information on the common application services and the extra data related to them, see Common Application Controls.
      
@@ -89,7 +89,7 @@ if (ret != APP_CONTROL_ERROR_NONE)
 
       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);
 
      
 
      10. 
 
    10. 
@@ -98,7 +98,7 @@ if (ret != APP_CONTROL_ERROR_NONE)
 
       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);
 
      
 
@@ -125,7 +125,7 @@ _app_control_extra_data_cb(app_control_h app_control, const char *key, void *use
    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);
 
@@ -134,7 +134,7 @@ _app_control_extra_data_cb(app_control_h app_control, const char *key, void *use
 
 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);
 
 
@@ -145,7 +145,7 @@ if (ret != APP_CONTROL_ERROR_NONE)
 
       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);
 
      
diff --git a/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
index 5b72738..df8ce91 100644
--- a/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
@@ -210,7 +210,7 @@ remove_value_request_cb(int request_id, data_control_h provider, const char *key
       {
          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;
          }
@@ -314,7 +314,7 @@ map_get_response_cb(int request_id, data_control_h provider,
    }
    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);
    }
 }
@@ -329,7 +329,7 @@ map_set_response_cb(int request_id, data_control_h provider, bool provider_ret,
    }
    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);
    }
 }
@@ -344,7 +344,7 @@ map_add_response_cb(int request_id, data_control_h provider, bool provider_ret,
    }
    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);
    }
 }
@@ -359,7 +359,7 @@ map_remove_response_cb(int request_id, data_control_h provider, bool provider_re
    }
    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);
    }
 }
@@ -380,17 +380,17 @@ initialize_datacontrol_consumer(appdata_s *ad)
    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
@@ -403,7 +403,7 @@ initialize_datacontrol_consumer(appdata_s *ad)
    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) 
       {
@@ -639,7 +639,7 @@ sql_delete_response_cb(int request_id, data_control_h provider, bool provider_re
    }
    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);
    }
 }
@@ -654,7 +654,7 @@ sql_insert_response_cb(int request_id, data_control_h provider, long long insert
    }
    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);
    }
 }
@@ -669,7 +669,7 @@ sql_select_response_cb(int request_id, data_control_h provider, result_set_curso
    }
    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);
    }
 
@@ -699,7 +699,7 @@ sql_update_response_cb(int request_id, data_control_h provider, bool provider_re
    }
    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);
    }
 }
@@ -720,19 +720,19 @@ initialize_datacontrol_consumer(appdata_s *ad)
    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;
@@ -743,7 +743,7 @@ initialize_datacontrol_consumer(appdata_s *ad)
    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");
diff --git a/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm
index aa54c52..1cf7b20 100644
--- a/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm
@@ -167,7 +167,7 @@ main(int argc, char* argv[])
    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;
@@ -224,22 +224,22 @@ app_create(void *user_date)
    // 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;
@@ -392,7 +392,7 @@ main(int argc, char* argv[])
    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;
diff --git a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
index f253177..9e8c3a0 100644
--- a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
@@ -916,7 +916,7 @@ animate_reset_cb(void *data, double pos)
 }
 
 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);
@@ -1416,7 +1416,7 @@ animate_reset_cb(void *data, double pos)
 }
 
 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);
@@ -1449,7 +1449,7 @@ create_base_gui(appdata_s *ad)
 
    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);
    }
 
@@ -1638,9 +1638,9 @@ app_terminate(void *data)
 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;
diff --git a/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
index 9a06a11..7e725b0 100644
--- a/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
@@ -101,7 +101,7 @@ tbm_surface_info_s surface_info;
 
 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");
 }
 
diff --git a/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
index cb114b1..6372251 100644
--- a/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
@@ -112,7 +112,7 @@ if (media_format_get_video_info(fmt, &mimetype, &w, &h, &avg_bps
 }
 else
 {
-   print("media_format_get_video is failed...");
+   print("media_format_get_video failed...");
 }
 
 
diff --git a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
index 92b45a3..8df8d5e 100644
--- a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
@@ -87,7 +87,7 @@ init_scmirroring_sink()
    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;
    }
@@ -143,7 +143,7 @@ prepare_scmirroring_sink(scmirroring_display_type_e display_type)
    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;
    }
@@ -166,7 +166,7 @@ prepare_scmirroring_sink(scmirroring_display_type_e display_type)
          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;
@@ -183,7 +183,7 @@ prepare_scmirroring_sink(scmirroring_display_type_e display_type)
          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;
@@ -256,7 +256,7 @@ create_base_gui(scmirroring_display_type_e display_type)
 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;
 }
@@ -283,7 +283,7 @@ start_scmirroring_sink(const char* peer_ip, const char* peer_port)
    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;
    }
@@ -297,7 +297,7 @@ start_scmirroring_sink(const char* peer_ip, const char* peer_port)
    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;
    }
@@ -324,7 +324,7 @@ scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e s
          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;
          }
@@ -355,7 +355,7 @@ destroy_scmirroring_sink()
    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;
    }
@@ -369,7 +369,7 @@ destroy_scmirroring_sink()
    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;
    }
@@ -383,7 +383,7 @@ destroy_scmirroring_sink()
    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;
    }
@@ -410,7 +410,7 @@ scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e s
       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;
       }
@@ -423,7 +423,7 @@ scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e s
          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;
          }
diff --git a/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
index 96dfe4c..1d1f994 100644
--- a/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
@@ -148,7 +148,7 @@ int error_code;
 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);
diff --git a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
index e55657d..bc1f9f6 100755
--- a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
@@ -38,8 +38,8 @@
 				
    11. Object Push Profile (OPP) operations
@@ -100,9 +100,9 @@
 					
      Connect to the BLE target before using the GATT APIs.
    12. Managing the GATT Client Operations
 					
      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.
      13. 
-					
    13. Managing Common Getter GATT Operations
-                    
      Get information used commonly in client GATT operations.
      14. 
-					
    14. Managing Common Setter GATT Operations
+					
    15. Managing Common GATT Getter Operations
+                    
      Get information used commonly in GATT client operations.
      16. 
+					
    16. Managing Common GATT Setter Operations
                     
      Set the properties and values of GATT attributes.
    17. Object Push Profile (OPP) operations
@@ -149,7 +149,7 @@ bt_error_e ret;
 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;
 }
@@ -159,8 +159,6 @@ if (ret != BT_ERROR_NONE)
 			
 
      To allow the user to enable or disable Bluetooth, use the application control to display the Bluetooth activation settings.
      
 
      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.
      
-		
-
      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).
      
 
   
      Figure: Bluetooth activation settings application (off screen on the left and on screen on the right)
       
   
      Bluetooth activation settings application (off screen on the left and on screen on the right)
       
@@ -214,7 +212,7 @@ bt_adapter_state_e adapter_state;
 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;
 }
@@ -238,7 +236,7 @@ adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void* use
 {
    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;
    }
@@ -289,47 +287,37 @@ adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void* use
 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.");
 }
 
      18. Finding Other Devices
      
 
-
      To find remote Bluetooth devices either through device discovery or querying bonded devices:
      
+
      To find remote Bluetooth devices, you can either discover them and bond with them, or you can query the list of previously bonded devices:
        
-
      • Define and register the discovery state callback function.
+
      • Discover and bond with new devices:
 
          
-
        1. 
-
          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.
          
-
-
          Declare the discovery start functions for the 2 types.
          
-
          // 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);
-
          
- 
          2. 
- 
        2. 
-
          If discovering Bluetooth succeeds, you receive the BT_ERROR_NONE result as the first parameter in your bt_adapter_device_discovery_state_changed_cb() (classic Bluetooth) or bt_adapter_le_device_discovery_state_changed_cb() (Bluetooth LE) callback function. If your device did not start to discover devices due to an error, the result code is BT_ERROR_TIMEOUT. If stopping the discovery succeeds, you can also receive BT_ERROR_CANCELLED.
          
-
          3. 
-
        3. 
-
          When your implemented callback function is first called, the second parameter, discovery_state, is BT_ADAPTER_DEVICE_DISCOVERY_STARTED or BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED. This indicates that device discovery has begun.
          
-
          The discovery states are values of the enumerations bt_adapter_device_discovery_state_e (classic Bluetooth) (in mobile and wearable applications) or bt_adapter_le_device_discovery_state_e (Bluetooth LE) (in mobile applications).
          
-
          Each time you find a remote Bluetooth device, discovery_state is in the BT_ADAPTER_DEVICE_DISCOVERY_FOUND or BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND 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.
          
-
          discovery_info is a NULL value in the BT_ADAPTER_DEVICE_DISCOVERY_STARTED, BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED, BT_ADAPTER_DEVICE_DISCOVERY_FINISHED, or BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED state.
          
-
          The following example shows the implementation for classic Bluetooth. Bluetooth LE usage is the same.
          
-
          #include <glib.h> // For GList
+
        4. Define and register the discovery state change callback.
+
          Register the callback with the bt_adapter_set_device_discovery_state_changed_cb() (classic Bluetooth) or bt_adapter_le_set_device_discovery_state_changed_cb() (Bluetooth LE) function.
          
+
          Use the callback to manage the discovery process:
          
+
          • The first callback parameter defines the result of the Bluetooth discovery process. In case of success, the parameter value is BT_ERROR_NONE. If the discovery failed to start due to an error, the parameter value is BT_ERROR_TIMEOUT.
            • 
+
          • The second callback parameter defined the current state of the discovery process using the enumerators bt_adapter_device_discovery_state_e (classic Bluetooth) (in mobile and wearable applications) or bt_adapter_le_device_discovery_state_e (Bluetooth LE) (in mobile applications):
            
+
            • When you start the discovery process, the callback is triggered with the BT_ADAPTER_DEVICE_DISCOVERY_STARTED or BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED state.
+
              Similarly, when you stop the discovery process, the callback is triggered with the BT_ADAPTER_DEVICE_DISCOVERY_FINISHED or BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED state.
              • 
+
            • Each time a remote Bluetooth device is found, the callback is triggered with the BT_ADAPTER_DEVICE_DISCOVERY_FOUND or BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND state.
+
              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.
          
+
+
          The following example shows the callback implementation for classic Bluetooth. Bluetooth LE is implemented in the same way.
          
+
          +#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;
    }
@@ -359,142 +347,98 @@ adapter_device_discovery_state_changed_cb(int result, bt_adapter_device_discover
          }
          break;
    }
-}
          
-
          5. 
-
        5. 
-
          Register the callback for classic Bluetooth. Bluetooth LE usage is the same.
          
-
          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.");
-}
          
-
          6. 
-
        
+   dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_device_discovery_state_changed_cb] failed.");
+}
+
 
        • 
-
      • Find other Bluetooth devices.
-
        If you want to stop the device discovery, call the bt_adapter_stop_device_discovery() (classic Bluetooth) or bt_adapter_le_stop_device_discovery() (Bluetooth LE) function.
        
-
        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.
        
+
      • Start the discovery process:
 
         // 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.");
-}
        
+   dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_device_discovery] failed.");
+}
+
+
        You can discover a nearby remote Bluetooth device, if the remote device Bluetooth is enabled and in a discovery mode.
        
 
+
        To stop the device discovery, call the bt_adapter_stop_device_discovery() (classic Bluetooth) or bt_adapter_le_stop_device_discovery() (Bluetooth LE) function.
        
 
        • 
-
-
      • Enable discovery.
-
          
 
        1. 
-
          Check the current visibility of your device. For other devices to find your device, your device must be discoverable.
          
+
          To bond with a discovered remote device, use the bt_device_create_bond() function. To cancel the bonding, call the bt_device_cancel_bonding() function.
          
+
 
          -// 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.");
 }
          
-
          2. 
-
        2. 
-
          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).
          
-
          Figure: Bluetooth visibility setting application
          
-
          Bluetooth visibility setting application
          
-
-
          -#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;
-   }
+
          To get notified when the bonding process has finished, register a bond created callback using the bt_device_set_bond_created_cb() function. From the callback, you can get the service UUID and the list of services provided by the remote Bluetooth device.
          
 
-   return 0;
-}
          
-
          3. 
-
        3. 
-
          To get a notification when the visibility is changed after 90 seconds, implement the following callback:
          
 
           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.");
    }
-}
          
-
          4. 
-
        4. 
-
          Register the callback:
          
-
          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.");
-}
          
+   dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_set_bond_created_cb] failed.");
+
+   return;
+}
+
+
+
          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.
          
 
          5. 
 
        
 
        • 
-
      • Query bonded devices.
-
          
-
        1. 
-
          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 bt_adapter_foreach_bonded_device() function. You can get information about bonded devices in the bt_adapter_bonded_device_cb() callback function, which you need to call for each bonded device.
          
-
          Declare the bt_adapter_foreach_bonded_device() function.
          
-
          int bt_adapter_foreach_bonded_device(bt_adapter_bonded_device_cb foreach_cb, void *user_data)
          
-
          You can get information (such as the device name, service list, and Mac address) about the bonded device.
          
-
          To continue performing iterations, your implemented callback function must return true. Otherwise, it returns false and stops performing additional iterations.
          
-
          The following example describes how to query bonded devices and how to discover a desired device.
          
+
        2. Query the bonded device list.
+
          To query the list of previously bonded devices, use the bt_adapter_foreach_bonded_device() 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.
          
+
          Make sure that the callback returns true until you have found the device you want. When the callback returns false, the iterations stop and no more callbacks are called even if there are more devices in the bonded list.
          
 
          // Server address for connecting
 char *bt_server_address = NULL;
 const char *remote_server_name = "server device";
@@ -508,7 +452,8 @@ adapter_bonded_device_cb(bt_device_info_s *device_info, void *user_data)
    }
    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"
    } 
@@ -535,78 +480,126 @@ adapter_bonded_device_cb(bt_device_info_s *device_info, void *user_data)
 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);
 
          
-
          3. 
-
        
-
        • 
+
        To remove a device from the bonded list, call the bt_device_destroy_bond() function.
        
+
      
+
+  
      
 	
 
 
 
 
 			
 			
 					
 				
 				
 
 
  
 
       
+    
+     
+      
+     
+     
+      
+     
+    
+  
      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.
        
+
+
      To manage the device visibility and enable discovery:
      
 
-
    18. Request bonding with a remote Bluetooth device.
 
        
 
      1. 
-
        You can request to bond with a remote device using the bt_device_create_bond() function. If you want to cancel bonding, call the bt_device_cancel_bonding() function.
        
-
        To get notified when the bonding has finished, register a bt_device_bond_created_cb() callback function using the bt_device_set_bond_created_cb() function. From this callback, you can get the service list that the remote Bluetooth device provides and the service UUID from that service list.
        
-
        The following example shows how to implement the bt_device_bond_created_cb() callback function and bond with a remote Bluetooth device.
        
+
        Check the current visibility of your device:
        
+
        +// 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.");
+}
+
        
+
        2. 
+
      2. 
+
        To allow the user to change the visibility mode of the device, use the application control to display the Bluetooth visibility setting application.
        
+
        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.
        
+
        Bluetooth visibility setting application
        
+
+
        +#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;
+}
+
        
+
        3. 
+
      3. 
+
        To get a notification when the visibility mode changes, define and register a visibility mode change callback:
        
 
         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.");
-}
        
-
        4. 
-
      4. 
-
        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.
        
-
        You can verify the bonding by calling the bt_adapter_foreach_bonded_device() function. To remove the device from the bonded list, call the bt_device_destroy_bond() function.
        
+
    
 
 
-
-
 
  
    Connecting to Other Devices Using SPP
    
 			
@@ -656,7 +649,7 @@ socket_connection_state_changed(int result, bt_socket_connection_state_e connect
 {
    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;
    }
@@ -710,7 +703,7 @@ if (ret != BT_ERROR_NONE)
 
  • Connect as a client:
 
      
 
    1. Define and register the socket connection state change callback using the bt_socket_set_connection_state_changed_cb() function.
-
      The callback in invoked whenever the connection state changes (for example, when you connect to the server device). 
      
+
      The callback is invoked whenever the connection state changes (for example, when you connect to the server device). 
      
 
       ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
 if (ret != BT_ERROR_NONE) 
@@ -738,14 +731,6 @@ if (ret != BT_ERROR_NONE)
 
       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) 
 {
@@ -802,7 +787,7 @@ bt_socket_data_received_cb(bt_socket_received_data_s* data, void* user_data)
 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.");
 }
 
      
 
@@ -820,11 +805,11 @@ bt_error_e ret;
 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);
 }
 
      2. 
 
@@ -836,11 +821,11 @@ bt_error_e ret;
 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);
 }
 
    • 
 
@@ -854,7 +839,7 @@ int ret = BT_ERROR_NONE;
 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
@@ -920,7 +905,7 @@ int ret = 0;
 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;
@@ -943,7 +928,7 @@ __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle, void
                                                  __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;
@@ -967,7 +952,7 @@ __bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle, void
    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;
 }
@@ -1004,7 +989,7 @@ bt_gatt_h desc = NULL;
 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;
 }
@@ -1012,7 +997,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1020,7 +1005,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1028,7 +1013,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1067,7 +1052,7 @@ bt_gatt_h desc = NULL;
 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;
 }
@@ -1075,7 +1060,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1083,7 +1068,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1091,7 +1076,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1100,7 +1085,7 @@ ret = bt_gatt_client_write_value(desc, __bt_gatt_client_write_complete_cb, NULL)
 
 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;
 }
@@ -1162,7 +1147,7 @@ __bt_gatt_client_set_value(char *type, char *value, bt_gatt_h h)
 
    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;
 }
@@ -1196,7 +1181,7 @@ bt_gatt_h chr = NULL;
 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;
 }
@@ -1204,7 +1189,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1212,7 +1197,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1249,7 +1234,7 @@ bt_gatt_h chr = NULL;
 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;
 }
@@ -1257,7 +1242,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1265,7 +1250,7 @@ if (ret != BT_ERROR_NONE)
 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;
 }
@@ -1306,7 +1291,7 @@ bt_gatt_type_e gatt_type;
 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);
 }
 
    
 
@@ -1321,7 +1306,7 @@ char *uuid = NULL;
 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);
 }
 
    
 
@@ -1337,7 +1322,7 @@ char *value = NULL;
 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);
 }
 
    
 
@@ -1354,7 +1339,7 @@ int value;
 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);
 }
 
    
 
@@ -1371,7 +1356,7 @@ float value;
 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);
 }
 
    
 
@@ -1383,7 +1368,7 @@ bt_gatt_h svc = NULL;
 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);
 }
    @@ -1397,14 +1382,14 @@ bt_gatt_h chr = NULL; 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); } @@ -1420,21 +1405,21 @@ bt_gatt_h desc = NULL; 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); } @@ -1448,7 +1433,7 @@ int properties; 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); } @@ -1461,7 +1446,7 @@ bt_gatt_h chr = NULL; 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); } @@ -1474,7 +1459,7 @@ bt_gatt_h dsc = NULL; 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); } @@ -1487,7 +1472,7 @@ bt_gatt_client_h client = NULL; 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); } @@ -1500,7 +1485,7 @@ bt_gatt_write_type_e write_type; 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); } @@ -1515,7 +1500,7 @@ bt_gatt_write_type_e write_type = NULL; 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); } @@ -1639,7 +1624,7 @@ connection_requested_cb_for_opp_server(const char *remote_address, void *user_da 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); @@ -1671,13 +1656,13 @@ ret = bt_opp_server_accept(bt_opp_server_transfer_progress_cb_for_opp,                            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."); } @@ -1693,7 +1678,7 @@ bt_error_e ret; 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; } @@ -1704,7 +1689,7 @@ if (ret != BLUETOOTH_ERROR_NONE) 
     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);
@@ -1714,7 +1699,7 @@ ret = bt_opp_client_add_file(caller_id_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;
 }
@@ -1760,11 +1745,11 @@ ret = bt_opp_client_push_files(remote_addr, __bt_opp_client_push_responded_cb,
                                __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.");
 }
    @@ -1777,7 +1762,7 @@ bt_error_e ret; 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; } @@ -1786,7 +1771,7 @@ ret = bt_opp_client_deinitialize(); 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; } @@ -1813,7 +1798,7 @@ main()    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; @@ -1931,7 +1916,7 @@ main()    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; @@ -1996,7 +1981,7 @@ main()    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(); @@ -2106,7 +2091,7 @@ ret = bt_adapter_le_destroy_advertiser(advertiser); 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; @@ -2259,7 +2244,7 @@ bt_socket_unset_connection_state_changed_cb(); 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."); } diff --git a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm index 7e7d7f0..1d038c7 100644 --- a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm @@ -113,7 +113,7 @@ connection_destroy(connection); -

    Getting the Network Connection Details

    +

    Getting Network Connection Details

    To get the type of the current connection, IP address, and proxy information:

    @@ -166,7 +166,7 @@ if (error_code == CONNECTION_ERROR_NONE) } -

    Getting the Connection Information

    +

    Getting Connection Information

    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):

    @@ -228,7 +228,7 @@ switch (wifi_state)
  • To get connection statistics, use the connection_get_statistics() function. -

    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.

    +

    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:

    @@ -76,11 +76,11 @@
  • Creating or Verifying Signatures

    Create or verify a signature on a given message.

    • -
  • Verifying or Getting a Certificate Chain +
  • Verifying and Getting a Certificate Chain

    Verify a certificate chain and get it.

  • Loading a Certificate or a PKCS#12 File -

    Load a certificate or key from a certificate file or a PKCS#12 file.

    • +

    Load a certificate or key from a certificate file or a PKCS#12 file.

  • Implementing Access Control

    Set access control rules for each individual client's data, certificates, and keys.

    • @@ -90,7 +90,7 @@

    To define the header file and privileges required to use the key manager:

      -

    1. To use the Key Manager privileged API, declare the http://tizen.org/privilege/keymanager privilege in the tizen-manifest.xml file of the application package.

      2. +

    2. To use the Key Manager privileged API, add the http://tizen.org/privilege/keymanager privilege in the manifest file of the application.

    3. To use the functions and data types of the Key Manager API (in mobile and wearable applications), include the <ckmc/ckmc-manager.h> header file in your application:

       #include <ckmc/ckmc-manager.h>
@@ -98,7 +98,7 @@
 
 
      Saving, Getting, or Removing a Key
      
 
-
      To store, remove, and retrieve client keys from the key manager:
      
+
      To store, remove, and retrieve client keys using the key manager:
      
 
 
      1. Store a new key:
 
        @@ -121,11 +121,11 @@ char* binary_key = "-----BEGIN PUBLIC KEY-----\n"
 
 test_key.raw_key =  (unsigned char *) binary_key;
 test_key.key_size = strlen(binary_key);
-test_key.key_type = CKMC_KEY_NONE; // The real key type is determined by the key manager
-test_key.password = NULL; // This means the binary_key is not encrypted with any password
+test_key.key_type = CKMC_KEY_NONE; // Real key type is determined by the key manager
+test_key.password = NULL; // binary_key is not encrypted with a password
 
 store_policy.password = key_password; // NULL means that the test_key is not encrypted with a per key password
-store_policy.extractable = true; // This means that the key value is extractable
+store_policy.extractable = true; // Key value is extractable
 
 ret = ckmc_save_key(alias, test_key, store_policy);
 if (CKMC_ERROR_NONE != ret)
@@ -134,7 +134,7 @@ if (CKMC_ERROR_NONE != ret)
 }
 
        2. 
 
-
      2. Get a key from the key manager:
+
      3. Get the key from the key manager:
 
         int ret = CKMC_ERROR_NONE;
 
@@ -173,13 +173,14 @@ plist = alias_list;
 do
 {
    ckmc_get_key(plist->alias, key_password, &test_key);
-   dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", ++count_list, test_key->key_size);
+   dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", 
+              ++count_list, test_key->key_size);
    ckmc_key_free(test_key);
    plist = plist->next;
 }
 while(plist != NULL);
 
-ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed.
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed
 
        4. 
 
      4. Remove the key:
 
        @@ -199,7 +200,7 @@ if (CKMC_ERROR_NONE != ret)
 
 
        Saving, Getting, or Removing a Certificate
        
 
-
        To store, remove, or retrieve the client certificate from the key manager:
        
+
        To store, remove, or retrieve the client certificate using the key manager:
        
 
 
        1. Store a new certificate:
 
          @@ -252,7 +253,7 @@ if (CKMC_ERROR_NONE != ret)
 }
 
          2. 
 
-
        2. Get a certificate from the key manager:
+
        3. Get the certificate from the key manager:
 
           int ret = CKMC_ERROR_NONE;
 
@@ -290,7 +291,8 @@ plist = alias_list;
 do
 {
    ckmc_get_cert(plist->alias, password, &test_cert);
-   dlog_print(DLOG_INFO, LOG_TAG, "%d th cert : cert size =%d\n", ++count_list, test_cert->cert_size);
+   dlog_print(DLOG_INFO, LOG_TAG, "%d th cert : cert size =%d\n", 
+              ++count_list, test_cert->cert_size);
    ckmc_cert_free(test_cert);
    plist = plist->next;
 }
@@ -315,7 +317,7 @@ if (CKMC_ERROR_NONE != ret)
 
 
          Saving, Getting, or Removing Data
          
 
-
          To store, remove, or retrieve client data on or from the key manager:
          
+
          To store, remove, or retrieve client data using the key manager:
          
 
 
          1. Store new data:
 
            @@ -379,7 +381,8 @@ plist = alias_list;
 do
 {
    ckmc_get_data(plist->alias, password, &test_data);
-   dlog_print(DLOG_INFO, LOG_TAG, "%d th data : data size =%d\n", ++count_list, test_data->size);
+   dlog_print(DLOG_INFO, LOG_TAG, "%d th data : data size =%d\n", 
+              ++count_list, test_data->size);
    ckmc_buffer_free(test_data);
    plist = plist->next;
 }
@@ -402,26 +405,27 @@ if (CKMC_ERROR_NONE != ret)
 
 
            Creating Key Pairs
            
 
-
            To generate asymmetric key pairs - the RSA, ECDSA, or DSA key pair:
            
+
            To generate asymmetric key pairs (RSA, ECDSA, or DSA key pair):
            
 
 
            • Create the RSA key pair:
              
 
               int ret = CKMC_ERROR_NONE;
 
-size_t size = 2048; // Key Manager supports 1024, 2048, 4096
+size_t size = 2048; // Key manager supports 1024, 2048, 4096
 const char *private_key_alias = "PRV_RSA1";
 const char *public_key_alias = "PUB_RSA1";
 ckmc_policy_s policy_private_key;
 ckmc_policy_s policy_public_key;
 
-// This private key is encrypted with an additional password
+// Private key is encrypted with an additional password
 policy_private_key.password = (char *)"pri_password";
-policy_private_key.extractable = false; // This key cannot be extracted from the key manager
+policy_private_key.extractable = false; // Key cannot be extracted from the key manager
 
 policy_public_key.password = NULL;
 policy_public_key.extractable = true;
 
-ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
+ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias,
+                               policy_private_key, policy_public_key);
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
@@ -438,14 +442,15 @@ const char *public_key_alias = "PUB_ECDSA1";
 ckmc_policy_s policy_private_key;
 ckmc_policy_s policy_public_key;
 
-// This private key is encrypted with an additional password
+// Private key is encrypted with an additional password
 policy_private_key.password = (char *)"pri_password";
-policy_private_key.extractable = false; // This key cannot be extracted from the key manager
+policy_private_key.extractable = false; // Key cannot be extracted from the key manager
 
 policy_public_key.password = NULL;
 policy_public_key.extractable = true;
 
-ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
+ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias, 
+                                 policy_private_key, policy_public_key);
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
@@ -469,7 +474,8 @@ policy_private_key.extractable = false;
 policy_public_key.password = NULL;
 policy_public_key.extractable = true;
 
-ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
+ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, 
+                               policy_private_key, policy_public_key);
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
@@ -479,7 +485,7 @@ if (CKMC_ERROR_NONE != ret)
 
              Creating or Verifying Signatures
              
 
 			
              To create or verify signatures:
              
-
              1. Store a private and public key.
+
                1. Store a private and public key:
 
                   int ret = CKMC_ERROR_NONE;
 
@@ -551,7 +557,7 @@ pripolicy.extractable = true;
 prikey.raw_key = (unsigned char *)prv;
 prikey.key_size = strlen(prv);
 prikey.key_type = CKMC_KEY_NONE;
-prikey.password = key_passwd; // The private key, prv, is encrypted with the key_password
+prikey.password = key_passwd; // prv private key is encrypted with the key_password
 
 ret = ckmc_save_key(pri_alias, prikey, pripolicy);
 if (CKMC_ERROR_NONE != ret)
@@ -586,13 +592,15 @@ char *pub_passwd = NULL;
 msg_buff.data = (unsigned char *)message;
 msg_buff.size = strlen(message);
 
-ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &signature);
+ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, hash_algo, 
+                            pad_algo, &signature);
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
 }
 
-ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);
+ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, *signature, 
+                            hash_algo, pad_algo);
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
@@ -617,13 +625,15 @@ char *pub_passwd = NULL;
 msg_buff.data = (unsigned char *)message;
 msg_buff.size = strlen(message);
 
-ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &signature);
+ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, 
+                            hash_algo, pad_algo, &signature);
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
 }
 
-ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);
+ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, 
+                            *signature, hash_algo, pad_algo);
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
@@ -632,7 +642,7 @@ if (CKMC_ERROR_NONE != ret)
 
            
 
          
 
-
          Verifying or Getting a Certificate Chain
          
+
          Verifying and Getting a Certificate Chain
          
 
 			
          To verify and get a certificate chain using raw certificates or a certificate alias for untrusted certificates:
          
 
          • Get a certificate chain with raw certificates.
            
@@ -642,7 +652,7 @@ int ret = CKMC_ERROR_NONE;
 
 ckmc_cert_s c_cert; // For a user certificate
 ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate
-ckmc_cert_list_s untrustedcerts; // Linked list of untrusted CA certificate
+ckmc_cert_list_s untrustedcerts; // Linked list of untrusted CA certificates
 ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain
 
 int cnt = 0;
@@ -760,7 +770,7 @@ ckmc_policy_s test_policy;
 
 ckmc_cert_s c_cert; // For a user certificate
 ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate
-ckmc_alias_list_s untrustedcerts; // Linked list of untrusted CA certificate's alias
+ckmc_alias_list_s untrustedcerts; // Linked list of untrusted CA certificate's aliases
 ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain
 
 int cnt = 0;
@@ -923,7 +933,6 @@ if (ppkcs12->priv_key != NULL)
 if (ppkcs12->cert != NULL)
 {
    // Check a certificate
-
 }
 
 int cnt = 0;
@@ -932,7 +941,7 @@ while(tmp_list!= NULL)
 {
    // Check a certificate list
 
-   tmp_list = tmp_list ->next;
+   tmp_list = tmp_list->next;
 }
 ckmc_pkcs12_free(ppkcs12); // Called when the pkcs12 data is no longer needed
 
          
@@ -974,13 +983,15 @@ const char *target1 = "accessor-allow-1";
 const char *target2 = "accessor-allow-2";
 const char *alias = "targetData";
 
-ret = ckmc_set_permission(alias, target1, CKMC_PERMISSION_READ); // Only allow reading data
+// Only allow reading data
+ret = ckmc_set_permission(alias, target1, CKMC_PERMISSION_READ); 
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
 }
 
-ret = ckmc_set_permission(alias, target2, CKMC_PERMISSION_READ | CKMC_PERMISSION_REMOVE); // Allow reading and deleting data
+// Allow reading and deleting data
+ret = ckmc_set_permission(alias, target2, CKMC_PERMISSION_READ | CKMC_PERMISSION_REMOVE); 
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
@@ -994,13 +1005,15 @@ int ret = CKMC_ERROR_NONE;
 const char *target = "denied-accessor";
 const char *alias = "targetData";
 
-ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_READ); // Allow the target user to a read (alias)
+// Allow the target user to a read (alias)
+ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_READ); 
 if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
 }
 
-ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_NONE); // Deny the target user access to data (alias)
+// Deny the target user access to data (alias)
+ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_NONE); 
 if (CKMC_ERROR_NONE != ret)
 
 {
diff --git a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
index 5b62615..5eb0bfc 100644
--- a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
@@ -49,7 +49,7 @@
 
 
          Getting Privilege Information
          
 
-
          To get privilege display information:
          
+
          To get privilege information:
          
 
 
            
 
          1. To use the functions and data types of the Privilege Info API (in mobile and wearable applications), include the <privilege_information.h> header file in your application:
            
@@ -57,35 +57,45 @@
 #include <privilege_information.h>
 
        5. 
 
      5. To get various privilege information:
-
          
+
            
 
-
          • Get the privilege display name using the privilege_info_get_display_name() function. The parameters are the API version, privilege name, and privilege display name.
+
          • Get the privilege display name using the privilege_info_get_display_name() function:
 
             char* displayName = NULL;
-int retVal = privilege_info_get_display_name("2.2", "http://tizen.org/privilege/application.launch", &displayName);
            			
+int retVal = privilege_info_get_display_name("2.2", 
+                                             "http://tizen.org/privilege/application.launch",
+                                             &displayName);
      4. -
    4. Get the privilege display name by package type using the privilege_info_get_display_name_by_pkgtype() function. The parameters are the package type, API version, privilege name, and privilege display name. +
    5. Get the privilege display name by package type using the privilege_info_get_display_name_by_pkgtype() function: 
       char* displayName = NULL;
-int retVal = privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2", "http://tizen.org/privilege/application.launch", &displayName);
      +int retVal = privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", +                                                        "2.2", +                                                        "http://tizen.org/privilege/application.launch", +                                                        &displayName);
      6. -
    6. Get the privilege description using the privilege_info_get_description() function. The parameters are the API version, privilege name, and privilege description. +
    7. Get the privilege description using the privilege_info_get_description() function: 
       char* description = NULL;
-int retVal = privilege_info_get_description("2.2", "http://tizen.org/privilege/application.launch", &description);
      +int retVal = privilege_info_get_description("2.2", +                                            "http://tizen.org/privilege/application.launch", +                                            &description);
      8. -
    8. Get the privilege description by package type using the privilege_info_get_description_by_pkgtype() function. The parameters are the package type, API version, privilege name, and privilege description. +
    9. Get the privilege description by package type using the privilege_info_get_description_by_pkgtype() function: 
       char* description = NULL;
-int retVal = privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2", "http://tizen.org/privilege/application.launch", &description);
      +int retVal = privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", +                                                       "2.2", +                                                       "http://tizen.org/privilege/application.launch", +                                                       &description);
      10. -
    -

    All functions above return the defined privilege_info_error_e enum value (in mobile and wearable applications) that indicates the result of executing the function and provides the privilege description by assigning the matching value to the third parameter.

    + +

    The above functions return a privilege_info_error_e enum value (in mobile and wearable applications) that indicates the value retrieval result. They also store the requested privilege display name or description in their last parameter.

    diff --git a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm index 6d6fe64..c3f4de3 100644 --- a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm @@ -63,11 +63,11 @@

    Calendar: Managing Calendar Events and Accessing the Calendar Database

    - +

    This tutorial demonstrates how you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.

    This feature is supported in mobile applications only.

    - +

    Warm-up

    Become familiar with the Calendar API basics by learning about:

    Related Info

    Initializing the Service Adaptor

    -

    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:

    +

    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:

    1. To use the functions and data types of the Service Adaptor API, include the <service_adaptor_client.h> header file in your application:

       #include <service_adaptor_client.h>
      2. -

    2. Obtain a service adaptor handle:

      + +

    3. Obtain a Service Adaptor handle:

       static service_adaptor_h service_adaptor;
 
@@ -97,10 +98,9 @@ typedef struct plugin_list_item_s plugin_list_item_t;
 typedef plugin_list_item_t plugin_list_t;
 typedef plugin_list_item_t* plugin_list_item_h;
 typedef plugin_list_t* plugin_list_h;
-
      4. -

    4. Obtain a list of available service adaptor plugins:

      +

    5. Obtain a list of available Service Adaptor plugins:

       static plugin_list_t plugins;
 
@@ -316,8 +316,8 @@ plugin_remove_file(service_plugin_h plugin, const char *file)
 }
      -

      Clean up

      -

      To clean up, use the service_adaptor_destroy() function:

      +

      Cleaning Up

      +

      To clean up and destroy the Service Adaptor handle, use the service_adaptor_destroy() function:

       static void
 service_adaptor_deinit(int result, void *user_data)
diff --git a/org.tizen.tutorials/html/native/system/device_tutorial_n.htm b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
index 1634da3..831a239 100644
--- a/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
@@ -66,7 +66,7 @@
 	
      Control the device power state.
    6. Monitoring Device Changes -

      Register a changed device event to monitor device changes.

      7. +

      Register a callback to monitor device changes.

      Retrieving Battery Information

      @@ -79,7 +79,7 @@ #include <device/battery.h> -
    7. Get the battery details: +
    8. To get the battery details:
      • Get the battery percentage with the device_battery_get_percent() function.

        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.

        @@ -119,7 +119,7 @@ error = device_battery_get_level_status(&level); #include <device/display.h>
        • -
      • Retrieve and set display properties: +
      • To retrieve and set display properties:
        • Get the number of display devices with the device_display_get_numbers() function: 
          @@ -129,7 +129,7 @@ error = device_display_get_numbers(&num);
        • Get the maximum brightness with the device_display_get_max_brightness() function. -

          The function returns the maximum brightness value that can be set. This function always returns as 100.

          +

          The function returns the maximum brightness value that can be set, which is always 100.

           int error, max;
@@ -147,8 +147,8 @@ error = device_display_set_brightness(0, 100);
          • -
        • Get and set the display state with the device_display_get_state() and device_display_change_state() functions: - +
        • Get and set the display state with the device_display_get_state() and device_display_change_state() functions. +

          The display_state_e enumerator (in mobile and wearable applications) defines the available display states.

           int error;
 display_state_e state;
@@ -157,7 +157,7 @@ error = device_display_get_state(&state);
 error = device_display_change_state(DISPLAY_STATE_NORMAL);
          -

          The display_state_e enumerator (in mobile and wearable applications) defines the available display states.

          +
    @@ -178,9 +178,10 @@ int error, num; error = device_haptic_get_count(&num); - +
  • To manage a haptic device: +
    1. Initialize the haptic device with the device_haptic_open() function. -

      The function opens a haptic-vibration device and returns the handle of the haptic device. It makes a connection to the vibrator.

      +

      The function opens a haptic-vibration device and returns the handle to it. It makes a connection to the vibrator.

       int error;
 haptic_device_h handle;
@@ -200,7 +201,7 @@ error = device_haptic_stop(handle, &effect_handle);
    2. When no longer needed, uninitialize the haptic device with the device_haptic_close() function. -

      The function closes the haptic handle. It disconnects the connection to the vibrator.

      +

      The function closes the haptic handle and disconnects the connection to the vibrator.

       int error;
@@ -208,6 +209,8 @@ error = device_haptic_close(0, handle);
    +
    • +

    Controlling LED Devices

    @@ -218,7 +221,8 @@ error = device_haptic_close(0, handle); 
     #include <device/led.h>
    - +
  • To manage a LED device: +
    • @@ -260,9 +265,10 @@ error = device_led_stop_custom(); 
     #include <device/power.h>
    - +
  • To lock and change the power state: + +

    • Monitoring Device Changes

    -

    To monitor device changes:

    +

    To monitor device changes in, for example, the device display state:

    1. To use the functions and data types of the Callback API (in mobile and wearable applications), include the <device/callback.h> header file in your application:

      @@ -300,7 +310,7 @@ error = device_power_wakeup(true); #include <device/callback.h>
      2. -
    2. Define the device changed callback, which is called when a device status changes. +
    3. Define a callback, which is called when the device status changes.

      The device_callback_e enumerator (in mobile and wearable applications) defines the available callback types.

      @@ -317,7 +327,8 @@ changed_cb(device_callback_e type, void *value, void *user_data)
      4. -
    4. Register the callback function: +
    5. Register the callback function. +

      To monitor the display state changes, use the DEVICE_CALLBACK_DISPLAY_STATE callback type.

       int error;
 error = device_add_callback(DEVICE_CALLBACK_DISPLAY_STATE, changed_cb, NULL);
diff --git a/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
index 36e7369..08c1bff 100644
--- a/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
@@ -74,7 +74,7 @@
 
  
      Sending a Log Message
      
 
-
      To send a log message with the MY_APP tag with various priorities:
      
+
      To send a log message with the MY_APP tag with various priorities, use the dlog_print() function:
      
 
 
       #define TAG "MY_APP"
@@ -97,7 +97,7 @@ main(void)
 
  
      Checking the Output Logs
      
 
-
      To execute dlogutil on the device sdb shell to check the out log:
      
+
      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.
      
 
      For information on connecting to the target and using it with SDB, see Smart Development Bridge.
      
 
 
      diff --git a/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm b/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
index 5c88c67..77abeda 100644
--- a/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
@@ -39,7 +39,7 @@
 
      Media key: Managing Callbacks from Media Key Events
      
 
 
-
      This tutorial demonstrates how you can manage callbacks for media key events.
       
+
      This tutorial demonstrates how you can react to media key events using callbacks.
       
 	
   
      Warm-up
      
     
      Become familiar with the Media key API basics by learning about:
       
@@ -58,7 +58,8 @@
 #include <media_key.h>
      6. -
    6. Implement the callback to handle media key events: +
    7. Implement a callback to handle media key events. +

      In the following example, the callback simply prints out the key from which the event originated and the state change that caused the event:

       void 
 event_cb(media_key_e key, media_key_event_e status, void* user_data)
@@ -131,12 +132,12 @@ media_key_api_func()
    }
    else
    {
-      dlog_print(DLOG_ERROR, LOG_TAG, "Reserve media key fail.");
+      dlog_print(DLOG_ERROR, LOG_TAG, "Reserve media key failed.");
    }
    8. -

      When you no longer need to track media key events, unregister the callback with the media_key_release() function:

      +

      When you no longer need to monitor the media key events, unregister the callback with the media_key_release() function:

          r = media_key_release();
@@ -155,7 +156,7 @@ media_key_api_func()
    }
    else
    {
-      dlog_print(DLOG_ERROR, LOG_TAG, "Fail. Unknown reason.");
+      dlog_print(DLOG_ERROR, LOG_TAG, "Failed. Unknown reason.");
    }
 }
    diff --git a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm index fb16b8e..7dabce2 100644 --- a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm @@ -49,14 +49,14 @@
  • Getting Runtime Information

    Get runtime information.

  • Monitoring Runtime Information Changes -

    Register a callback function for a specific change in the runtime information.

    +

    Register a callback function to monitor specific changes in the runtime information.

    • Getting Runtime Information

    -

    To get runtime information, which consists of key, value pairs:

    - +

    The runtime information consists of key and value pairs.

    +

    To get information on, for example, whether Bluetooth is enabled or an audio jack connected:

    1. To use the functions and data types of the Runtime information API (in mobile and wearable applications), include the <runtime_info.h> header file in your application:

      @@ -64,7 +64,8 @@
    2. Check whether Bluetooth is enabled. -

      Use the RUNTIME_INFO_KEY_BLUETOOTH_ENABLED key to check whether Bluetooth is enabled. The type of the value is bool, and the runtime_info_get_value_bool() function is used for the information.

      +

      Use the RUNTIME_INFO_KEY_BLUETOOTH_ENABLED key with the data type-specific get function.

      +

      The Bluetooth enabled key data type is bool, which means that you need to use the runtime_info_get_value_bool() function.

       #include <stdbool.h>
@@ -84,8 +85,9 @@ func(void)
    dlog_print(DLOG_INFO, LOG_TAG, "Bluetooth: %s", value ? "Enabled" : "Disabled");
 }
      3. -
    3. Get the audio jack status. -

      Use the RUNTIME_INFO_KEY_AUDIO_JACK_STATUS key to get the audio jack status. The type of the value is integer, and the runtime_info_get_value_int() function is used for the information.

      +
    4. Get the audio jack connection status. +

      Use the RUNTIME_INFO_KEY_AUDIO_JACK_STATUS key with the data type-specific get function.

      +

      The audio jack status key data type is integer, which means that you need to use the runtime_info_get_value_int() function.

       void 
@@ -119,19 +121,21 @@ func(void)
 
 
      Monitoring Runtime Information Changes
      
 
-
      To monitor runtime information changes:
      
+
      Applications can be notified about changes in the runtime information.
      
+
      To monitor, for example, the connection state of the USB cable:
      
 
 
        
 
      1. To use the functions and data types of the Runtime information API (in mobile and wearable applications), include the <runtime_info.h> header file in your application:
        
 
         #include <runtime_info.h>
 
        2. 
-
      2. Applications can be notified about changes in the runtime information. The runtime_info_set_changed_cb() and runtime_info_unset_changed_cb() functions are used to register a callback function. 
        
-
        Use the RUNTIME_INFO_KEY_USB_CONNECTED key to monitor the connection state of the USB cable:
        
+
      3. Use the runtime_info_set_changed_cb() function with the RUNTIME_INFO_KEY_USB_CONNECTED key to register a callback that is triggered each time the USB cable connection state changes.
        
+
        When no longer needed, unregister the callback with the runtime_info_unset_changed_cb() function.
        
 
 
         #include <stdbool.h>
 
+// Callback
 void 
 usb_connection_changed(runtime_info_key_e key, void *user_data)
 {
@@ -151,6 +155,7 @@ 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)
 {
diff --git a/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
index 41eb490..9185845 100644
--- a/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
@@ -24,7 +24,7 @@
 		
        Content
        
 				
 		
        Related Info
        
@@ -48,7 +48,7 @@
 			
 
@@ -59,8 +59,9 @@
 
         #include <system_info.h>
 
        4. 
-
      4. Device-specific information consists of "key, value" pairs. To get the device model name, use the http://tizen.org/system/model_name key.
        
-
        The type of the value is string, which means that the system_info_get_platform_string() function is used for the information. The value of the key must be released by the free() function.
        
+
      5. Device-specific information consists of "key, value" pairs. To get the device model name, use the http://tizen.org/system/model_name key with the data type-specific get function.
        
+
        The model name key data type is string, which means that you need to use the system_info_get_platform_string() function.
        
+
        When no longer needed, release the value of the key with the free() function.
        
  
 
         void 
@@ -82,16 +83,16 @@ func(void)
 } 
 
      
 
-
      Checking Whether a Camera is Provided
      
+
      Checking for Supported Features
      
 
-
      To check whether a camera is provided:
      
+
      To check, for example, whether the device provides a camera:
      
 
        
 
      1. To use the functions and data types of the System Information API (in mobile and wearable applications), include the <system_info.h> header file in your application:
        
 
         #include <system_info.h>
 
        2. 
-
      2. To check whether the device provides any kind of a camera, use the http://tizen.org/feature/camera key.
        
-
        The type of the value is bool, which means that the system_info_get_platform_bool() function is used for the information.
        
+
      3. To determine whether the device has a camera, use the http://tizen.org/feature/camera key with the data type-specific get function.
        
+
        The camera key data type is bool, which means that you need to use the system_info_get_platform_bool() function.
        
 
 
         #include <stdbool.h>
diff --git a/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
index af4e1e5..3a7c0ea 100644
--- a/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
@@ -45,7 +45,7 @@
     
        Become familiar with the System Settings API basics by learning about:
         
 		
 
@@ -116,7 +116,7 @@ _info_key[SYS_INFO_COUNT]=
 
        
 
        4. 
 
-
      4. Get the setting data.
        
+
      5. Obtain the setting data.
        
 
        The available settings are defined in the system_settings_key_e enumerator (in mobile and wearable applications).
        
  
 
        Read the data using the following functions, according to the data type of the value you want to read:
        
@@ -131,7 +131,7 @@ _info_key[SYS_INFO_COUNT]=
 #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]);
 
@@ -162,19 +162,20 @@ for (i = 0; i<SYS_INFO_COUNT; i++)
 
        6. 
 
 
-
      6. Track changes in the settings.
        
-
        1. To track changes in the value of any system setting, set a callback function with the proper key.
          
+
        2. Monitor changes in the setting values.
          
+
          1. To monitor when a system setting value changes, set a callback using the system_settings_set_changed_cb() function with the appropriate key as the first parameter.
            
 
-
            Because the SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE setting does not support the callback function, you must iterate through the SYS_INFO_COUNT-1 records.
            
+
            Because the SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE setting does not support the callback function, you must iterate through the SYS_INFO_COUNT - 1 records.
            
 
 
            -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);
 }
 
            2. 
 
-
          2. Define the callback which is invoked after each change. The system_settings_key_e key refers to the key which has changed.
            
+
          3. Define the callback to be invoked after each change.
            
+
            The system_settings_key_e key refers to the key that has changed.
            
 
 
             static void 
@@ -187,7 +188,7 @@ _system_settings_changed_cb(system_settings_key_e key, void *user_data)
 
          4. When the callbacks are no longer needed, unset them:
            
 
 
            -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);
 }
diff --git a/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm b/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm
index 1a69498..53a80cd 100644
--- a/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm
@@ -104,7 +104,7 @@ function1()
 {
    int cookies_f1 = 123;
 
-   trace_async_begin(cookies, "event name");
+   trace_async_begin(cookies_f1, "event name");
 } 
 
 void 
diff --git a/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm b/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm
index 4620fdd..b3c3300 100644
--- a/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm
@@ -46,7 +46,7 @@
 
            Become familiar with the Phonenumber utils API basics by learning about:
            
 	
              
 		
            • Getting the Location
-		
              Get the location based on the region and language.
              • 
+		
              Get the location from the phone number based on the region and language.
              
 		
            • Formatting the Number
 		
              Get the number formatted based on the region.
              • 		
 	
            
@@ -81,7 +81,7 @@ free(location);
 
          
 
  
          Formatting the Number
          
-
          To format the phone number:
          
+
          To format the phone number according to the rules of a specific region:
          
 
 
            
 
@@ -90,7 +90,7 @@ free(location);
 #include <phone_number.h>
      5. -

    5. Use the region to format the phone number:

      +

    6. Format the phone number to use region-specific separators:

      int ret;
 char *formatted_number = NULL;
diff --git a/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm b/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
index 2ed78b3..ebd8e12 100644
--- a/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
@@ -25,7 +25,7 @@
 		        
@@ -42,7 +42,7 @@
 
      Telephony Information: Handling Phone Call, SIM Card, and Network Information
      
 
   
-
      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.
      
+
      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.
      
 
 
 
      Warm-up
      
@@ -52,11 +52,11 @@
 	
    7. Initializing the Telephony Service
 	
      Initialize telephony for use.
      8. 
 	
    8. Getting Call Information
-	
      Access call information and track changes in call status.
      9. 
-	
    9. Getting SIM Information
-	
      Access SIM information and track changes in SIM status.
      10. 
+	
      Access call information and track changes in the call state.
      10. +
    10. Getting SIM Card Information +

      Access SIM card information and track changes in the SIM card state.

    11. Getting Network Information -

      Access network information and track changes in network status.

      12. +

      Access network information and track changes in the network state.

    12. Getting Modem Information

      Access modem information.

      13. @@ -64,9 +64,9 @@

      Initializing the Telephony Service

      -

      To initialize the telephony service:

      +

      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.

      - +

      To initialize the telephony service:

      1. To use the functions and data types of the Telephony Information API (in mobile and wearable applications), include the <telephony.h> header file in your application:

        @@ -74,7 +74,7 @@ #include <telephony.h>
      2. -

        To create a telephony handle, use the telephony_handle_list_s structure that holds the handles for all the subscriptions defined in telephony_common.h.

        +

        To create a telephony handle, use the telephony_handle_list_s structure that holds the handles for all the subscriptions defined in the telephony_common.h header file:

         typedef 
@@ -84,13 +84,11 @@ struct
    telephony_h *handle;
 } telephony_handle_list_s;
        -

        Pass the telephony_handle_list_s structure pointer to get the telephony handles for all subscriptions.

        -

        For example, there are 2 handles in a dual SIM device. In this case, handle[0] means the primary SIM and handle[1] means the secondary SIM.

        -

        You can send requests to specific subscriptions using the telephony handle for that subscription.

        3. -

      3. Get the telephony handle by using the telephony_init() function.

        - +
        4. +
      4. +

        Get the telephony handle with the telephony_init() function. Pass the telephony_handle_list_s structure pointer as a parameter to get the telephony handles for all subscriptions.

        +

        For example, there are 2 handles in a dual SIM device. In this case, handle[0] means the primary SIM and handle[1] means the secondary SIM. You can send requests to specific subscriptions using the telephony handle for that subscription.

        -#include <telephony.h>
 telephony_handle_list_s handle_list;
 
 int 
@@ -114,8 +112,7 @@ main()
  }
        5. -

      5. When the telephony handle is no longer needed, free the handle with the telephony_deinit() function.

        - +

      6. When no longer needed, free the telephony handle with the telephony_deinit() function:

         void 
 tutorial_telephony_deinit()
@@ -126,18 +123,20 @@ tutorial_telephony_deinit()
 
  
        Getting Call Information
        
  
+
        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 mobile and wearable applications).
        
  
        Getting call information involves:
        
  
  
-
        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 mobile and wearable applications) in call-related actions.
        
+
 
 
        Getting the Current Call List
        
 
 
        To get the current call list:
        
-
        1. Get the current call handle by using the telephony_call_get_call_list() function:
          
+
          1. Get the current call handle by using the telephony_call_get_call_list() function.
            
+
            After getting the handle, you can use it to retrieve various call information (such as handle ID, number, type, status, direction, and conference status).
            
 
 
             unsigned int count;
@@ -179,7 +178,8 @@ tutorial_telephony_call_get_call_list()
          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",
@@ -197,9 +197,9 @@ tutorial_telephony_call_get_call_list()
    }
 }
 
            
-
            After getting the handle, you can use it to retrieve various call information (such as handle ID, number, type, status, direction, conference status).
            2. 
+
 
-
          2. When the call handle is no longer needed, call the telephony_call_release_call_list() function to free the handle:
            
+
          3. When no longer needed, free the call handle with the telephony_call_release_call_list() function:
            
 
             void 
 tutorial_telephony_call_release_call_list()
@@ -208,11 +208,13 @@ tutorial_telephony_call_release_call_list()
 }
 
          
 
-
          Receiving Change Notifications for the Call Status
          
+
          Receiving Change Notifications for the Call State
          
 
-
          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.
          
+
          To receive notifications of call state changes asynchronously, register a callback with the telephony_set_noti_cb() function.
          
+
          You have to register the callback separately for each call state, using the applicable TELEPHONY_NOTI_VOICE_CALL_XXX or TELEPHONY_NOTI_VIDEO_CALL_XXX notification value in the second parameter of the telephony_set_noti_cb() function. The available values are defined in the telephony_noti_e enumerator (in mobile and wearable applications).
          
+
          When the notifications are no longer needed, unregister the callback for each call state with the telephony_unset_noti_cb() function.
          
+
          The following example registers callbacks for various voice call states:
          
 
-
          To be notified when the voice call status changes, implement and register a callback function compatible with the telephony_noti_cb() function typedef:
          
 
 
           static int 
@@ -288,7 +290,8 @@ voice_call_status_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *da
          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",
@@ -314,7 +317,8 @@ tutorial_telephony_set_noti_cb_voice()
 
    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
@@ -323,25 +327,24 @@ tutorial_telephony_set_noti_cb_voice()
 }
 
          
 
-
          After the callback is registered, you are notified of the voice call status until you cancel the registration. To unregister the callback, call the telephony_unset_noti_cb() function for each notification.
          
-
 
 
- 
          Getting SIM Information
          
+ 
          Getting SIM Card Information
          
  
+ 
          To extract information stored on a SIM card, use the SIM API (in mobile and wearable applications).
          
  
          Getting SIM information involves:
          
  
 
-
          To extract information stored on a SIM card, use the Telephony SIM API (in mobile and wearable applications).
          
 
-
          Getting the State of the SIM
          
-
          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 TELEPHONY_SIM_STATE_AVAILABLE.
          
 
-
          You can get the state of the SIM card by calling the telephony_sim_get_state() function. It returns the status of the SIM, which is one of the telephony_sim_state_e values (in mobile and wearable applications), through its output parameters.
          
+
          Getting the SIM Card State
          
+
          Before retrieving information from the SIM card, retrieve the card state. You can get SIM-related information only if the card state is TELEPHONY_SIM_STATE_AVAILABLE.
          
+
+
          To get the state, call the telephony_sim_get_state() function. It returns the SIM card state in its second parameter, using the values of the telephony_sim_state_e enumerator (in mobile and wearable applications).
          
 
 
           void 
@@ -360,8 +363,11 @@ tutorial_telephony_sim_get_state()
 }
 
          
 
-
          Receiving Change Notifications for the SIM State
          
-
          The telephony_noti_cb() 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.
          
+
          Receiving Change Notifications for the SIM Card State
          
+
+
          To receive notifications of SIM card state changes asynchronously, register a callback with the telephony_set_noti_cb() function. The callback returns the SIM state in its third parameter.
          
+
          When the notifications are no longer needed, unregister the callback with the telephony_unset_noti_cb() function by passing the notification ID as a parameter.
          
+
 
 
           void 
@@ -376,7 +382,7 @@ tutorial_telephony_set_noti_cb_sim()
 {
    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
@@ -386,16 +392,13 @@ tutorial_telephony_set_noti_cb_sim()
 }
 
          
 
-
          The callback function is invoked automatically when the status of the SIM changes, if you register the callback function using the telephony_set_noti_cb() function.
          
+
          Getting SIM Card Details
          
 
-
          Once the callback function of the SIM state change is registered, this callback function is invoked until it is unregistered with the telephony_unset_noti_cb() function by passing the notification ID.
          
+
          If the current SIM card state is SIM_STATE_AVAILABLE, you can call various telephony_sim_get_XXX() functions to retrieve the SIM card details: ICC-ID, operator (MCC+MNC), MSIN, SPN, subscriber number, subscriber ID, and application list.
          
 
-
          Getting SIM Information
          
-
          If you know the current SIM state and, it is for example SIM_STATE_AVAILABLE, 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.
          
+
          If the functions return SIM_ERROR_NONE, the requested SIM information is received and stored in an output parameter. Free all returned variables when they are no longer needed.
          
 
-
          If the function returns SIM_ERROR_NONE, the requested SIM information is received and stored in an output parameter. You must free all returned variables once you are done with them.
          
-
-
          To get ICC-ID information from a SIM card:
          
+
          For example, to get ICC-ID information from a SIM card:
          
 
 
           void 
@@ -414,23 +417,24 @@ tutorial_telephony_sim_get_icc_id()
 
  
          Getting Network Information
          
  
+ 
          To access information about the current cellular network and telephony service, use the Network API (in mobile and wearable applications).
          
  
          Getting network information involves:
          
  
  
-
          To access, but not change, information about the current cellular network and telephony service, use the Telephony Network API (in mobile and wearable applications).
          
+
 
 
 
          Getting the Network Service State
          
-
          Determine the state of the service network. The network service state is one of the telephony_network_service_state_e enumeration values (in mobile and wearable applications).
          
+
          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 TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE.
          
+
          To get the state, call the telephony_network_get_service_state() function. It returns the network service state in its second parameter, using the values of the telephony_network_service_state_e enumeration (in mobile and wearable applications).
          
 
-
          You can only get telephony network information if the state is TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE.
          
 
 
          -void 
+void
 tutorial_telephony_network_get_service_state()
 {
    telephony_network_service_state_e network_service_state;
@@ -447,28 +451,19 @@ tutorial_telephony_network_get_service_state()
 }
 
          
 
-
          Receiving Network Service State Change Notifications
          
+
          Receiving Change Notifications for the Network Service State
          
 
-
          The telephony_noti_cb() 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.
          
-
-
          The Telephony Network API provides change notifications for the following information:
          
-
            
-	
          • Network service state changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_SERVICE_STATE)
            • 
-	
          • Cell ID changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_CELLID)
            • 
-	
          • Roaming state changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_ROAMING_STATUS)
            • 
-	
          • Signal strength changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL)
            • 
-    
          • Network name changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_NETWORK_NAME)
            • 
-    
          • PS (packet-switched) type changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_PS_TYPE)
            • 
-    
          • Default data subscription changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION)
            • 
-    
          • Default subscription changes (telephony_set_noti_cb(), TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION)
            • 
-
          
+
          To receive notifications of network service state changes asynchronously, register a callback with the telephony_set_noti_cb() function. The callback returns the service state in its third parameter.
          
+
          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 TELEPHONY_NOTI_NETWORK_XXX notification value in the second parameter of the telephony_set_noti_cb() function. The available values are defined in the telephony_noti_e enumerator (in mobile and wearable applications).
          
+
          When the notifications are no longer needed, unregister the callback for each service state with the telephony_unset_noti_cb() function by passing the notification ID as a parameter.
          
+
          The following example registers a callback for the network service states:
          
 
 
           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 
@@ -486,20 +481,14 @@ tutorial_telephony_set_noti_cb_network()
 }
 
          
 
-
          The callback function is invoked automatically when the status of the network changes, if you register the callback function using the telephony_set_noti_cb() 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.
          
-
-
          Once the callback function of the network state change is registered, this callback function is invoked until it is unregistered with the telephony_unset_noti_cb() function by passing the notification ID.
          
-
-
          Getting Network Information
          
-
          If the current network service state is NETWORK_INFO_SERVICE_STATE_IN_SERVICE, 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.
          
-
-
          You must free all returned variables (strings) once you are done with them.
          
+
          Getting Network Details
          
 
-
          To get network information:
          
-
-
          • To get the Cell ID:
            
+
            If the current network service state is NETWORK_INFO_SERVICE_STATE_IN_SERVICE, you can call various telephony_network_get_XXX() functions to retrieve the network details: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type.
            
+
            If the functions return TELEPHONY_ERROR_NONE, the requested network information is received and stored in an output parameter. Free all returned variables when they are no longer needed.
            
+
            For example, to get the cell ID and MNC information:
            
 
 
            +// Cell ID
 void 
 tutorial_telephony_network_get_cell_id()
 {
@@ -511,11 +500,8 @@ tutorial_telephony_network_get_cell_id()
 
    return ret;
 }
-
            • 
-
-
          • To get the MNC:
            
 
-
            +// MNC
 void 
 tutorial_telephony_network_get_mnc()
 {
@@ -528,13 +514,14 @@ tutorial_telephony_network_get_mnc()
 
    return ret;
 }
-
          
+
          
 
  
          Getting Modem Information
          
 
-
          To access, but not change, information about the modem (IMEI and power status), use the Telephony Modem API (in mobile and wearable applications).
          
-
-
          To get modem information, use the telephony_modem_get_imei() function, and free all returned variables (strings) once you are done with them.
          
+
          To access information about the modem, use the Modem API (in mobile and wearable applications).
          
+
          You can call various telephony_modem_get_XXX() functions to retrieve the modem details: IMEI and power status.
          
+
          If the functions return TELEPHONY_ERROR_NONE, the requested modem information is received and stored in an output parameter. Free all returned variables when they are no longer needed.
          
+
          For example, to get IMEI information:
          
 
 
           void 
@@ -574,4 +561,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
  
-
+
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm
index c25eac8..660b992 100644
--- a/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm
@@ -11,7 +11,7 @@
     
     
 
-    External Output Manager: Using the External Output Devices
+    External Output Manager: Using External Output Devices
 
 
 
@@ -38,7 +38,7 @@
 
 
 
          
-
          External Output Manager: Using the External Output Devices
          
+
          External Output Manager: Using External Output Devices
          
   
          This tutorial demonstrates how you can control external output devices with the External Output Manager (EOM).
          
 
 
          This feature is supported in mobile applications only.
            
@@ -134,7 +134,8 @@ set_attribute()
    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;
@@ -193,8 +194,7 @@ make_external_window()
 
            
 
          1. Define the callbacks for various state changes:
 
            -typedef 
-struct
+typedef struct
 {
    Evas_Object *external_window;
    int output_id;
@@ -237,7 +237,7 @@ sample_notify_cb_attribute_changed(eom_output_id output_id, void *user_data)
    
    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)
    {
diff --git a/org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm
index af756b0..6f0ef51 100644
--- a/org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm
@@ -63,8 +63,8 @@
 #include <minicontrol_provider.h>
 
            
 
            2. 
-
          2. To create a minicontrol, use the minicontrol_create_window() function:
            
-
+
          3. To create a minicontrol, use the minicontrol_create_window() function.
            
+
            To create a minicontrol on the quick panel, the second parameter must be set to MINICONTROL_TARGET_VIEWER_QUICK_PANEL.
            
 
             Evas_Object *win;
 
@@ -72,8 +72,7 @@ win = minicontrol_create_window("mini-sample", MINICONTROL_TARGET_VIEW
 evas_object_resize(win, 480, 140);
 evas_object_show(win);
 
            
-
-
            To create a minicontrol on the quick panel, the target_viewer parameter must be set to MINICONTROL_TARGET_VIEWER_QUICK_PANEL.
            4. 
+
 
 
          4. Add a text label on the minicontrol using the elm_label_add() function:
 
diff --git a/org.tizen.tutorials/html/native/uix/ime_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/ime_tutorial_n.htm
index 37c2bdb..672e1db 100644
--- a/org.tizen.tutorials/html/native/uix/ime_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/ime_tutorial_n.htm
@@ -74,11 +74,15 @@
 
            To start the IME application life-cycle:
            
 
              
 
            1. Implement the ime_app_main() function as the main entry point of IME application:
-
              void ime_app_main(int argc, char **argv);
              
-
              The function is called when the user selects the IME as default from the Keyboard selection menu in the Settings application.
              
+
              +void ime_app_main(int argc, char **argv);
+
              
+
              The function is called when the user selects the IME as default from the IME selector menu.
              
 
              2. 
 
            2. Inside the ime_app_main() function, add the required callbacks and call the ime_run() function to start the application:
-
              int ime_run(ime_callback_s *basic_cb, void *user_data);
              3. 
+
              +int ime_run(ime_callback_s *basic_cb, void *user_data);
+
              
 
            
 
       
            Adding Event Callbacks
            
@@ -88,7 +92,8 @@
 
 
              
 
            1. 
-
              You must register and implement the create(), terminate(), show(), and hide() callback functions. Register them as the parameter of the ime_run() function:
               
+
              You must register the create(), terminate(), show(), and hide() callbacks.
              
+
              Add the callbacks to the ime_callback_s structure, and pass the structure as a parameter to the ime_run() function:
               
 
 
               #include <Elementary.h>
@@ -114,7 +119,7 @@ ime_app_main(int argc, char **argv)
 }
 
              
 
              2. 
-
            2. Define the callback functions:
+
            3. Define the callbacks:
 
               static void 
 create(void *user_data)
@@ -125,7 +130,7 @@ 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 
@@ -161,7 +166,7 @@ show(int context_id, ime_context_h context, void *user_data)
    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);
 }
 
@@ -170,11 +175,11 @@ hide(int context_id, void *user_data)
 {
    Evas_Object *ime_win = ime_get_main_window();
 
-   // Hide IME window
+   // Hide the IME window
    evas_object_hide(ime_win);
 }
 
              
-
              In the show() 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 ime_context_get_XXX() functions in the inputmethod.h header file.
              
+
              In the show() 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 ime_context_get_XXX() functions defined in the inputmethod.h header file.
              
 
              4. 
 
            
 
            5. 
@@ -205,7 +210,7 @@ ime_app_main(int argc, char **argv)
 }
 
          
 
          2. 
-
        2. Define the optional callback functions:
+
        3. Define the registered callbacks:
 
            
 
          • The focus_in() callback is triggered when an associated text input UI control in any application gets the focus. Usually, the focus_in() event is followed by the show() event.
 
@@ -244,14 +249,13 @@ cursor_position_updated(int cursor_pos, void *user_data)
       
 
            To make the option menu for the keyboard:
            
 
              
-
            1. Add the necessary callback functions for reacting to the keyboard option menu opening and closing before calling the ime_run() function:
+
            2. Add the necessary callbacks for reacting to the keyboard option menu opening and closing, before calling the ime_run() function:
 
              -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 = 
    {
@@ -273,7 +277,7 @@ void ime_app_main(int argc, char **argv)
 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);
@@ -381,7 +385,7 @@ boolean is_ime_enabled(const char *app_id)
 
 
              If the function is successful, it returns 0.
              
 
              3. 
-
            3. To check which IME is current selected as the default keyboard, call the ime_manager_get_active_ime() function:
+
            4. To check which IME is currently selected as the default keyboard, call the ime_manager_get_active_ime() function:
 
 
               void get_active_ime()
diff --git a/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
index fee5faf..b7ddac5 100644
--- a/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
@@ -23,7 +23,7 @@
 	
              
 		
              Content
              
 		
                
-			
              • Creating and Destroying STT Handles
                • 
+			
              • Initializing the STT
                • 
 			
              • Setting and Unsetting Callbacks
                • 
 			
              • Getting Information
                • 
 			
              • Connecting and Disconnecting the STT
                • 
@@ -43,14 +43,14 @@
 
                STT: Recognizing Speech
                
 
 
-
                This tutorial demonstrates how you can recognize sound data recorded by user and send the result as text.
                  
+
                This tutorial demonstrates how you can recognize sound data recorded by the user and manage the result as text.
                  
 
 				
 
                Warm-up
                
 
                Become familiar with the STT API basics by learning about:
                
 	
 
-
                Creating and Destroying STT Handles
                
+
                Initializing the STT
                
 
-
                To create and destroy STT handles:
                
+
                To initialize the STT:
                
 
                1. To use the functions and data types of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application:
 
                   #include <stt.h>
                  
 
                  2. 			
-
                2. 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 STT_STATE_CREATED.
                  
+
                3. To use the STT library, create an STT handle.
                   
+
                  The STT handle is used in other STT functions as a parameter. After the handle creation, the STT state changes to STT_STATE_CREATED.
                  
 
 	   
@@ -80,7 +81,7 @@
 		  
-		  
+		 
                   
 	   
                  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.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. 
 		
                   
 	                      
 	  
                   
@@ -100,16 +101,6 @@ create_stt_handle()
 
              5. 
 
            5. When you no longer need the STT library, destroy the STT handle using the stt_destroy() function:
              
 
-	   
-	    
-		 
-		  
-		 
-		 
-		  
-		 
-	    
-	  
              Note
              Do not use the stt_destroy() function within the callback function, or the stt_destroy() function fails and returns STT_ERROR_OPERATION_FAILED.
               
 
 
               void 
@@ -122,28 +113,40 @@ destroy_stt_handle(stt_h stt)
       // Error handling
    }
 }
-
              6.  
            
+
        + + + + + + + + + +
        Note
        Do not use the stt_destroy() function in a callback. Within a callback, the stt_destroy() function fails and returns STT_ERROR_OPERATION_FAILED.
        +

      Setting and Unsetting Callbacks

      +

      The enum values, as well as the parameter details, for the callback parameters are defined in the stt.h header file.

      To set and unset callbacks:

      -
      1. To use the functions and data types of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> 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. -
        -#include <stt.h>
        -
        2. -

      2. 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 STT_STATE_CREATED state.

        +
          +

        1. The STT provides various callbacks to get the information, such as the recognition result, state changes, language changes, and errors.

          +

          Set the callbacks in the STT_STATE_CREATED state.

          You can use the following callbacks:

          • State changed -

            If you set the state changed callback for the STT, it is invoked when a state is changed by the STT.

            +

            If you set the state changed callback, it is invoked when the STT state changes.

            +// 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)
 {
@@ -155,6 +158,7 @@ set_state_changed_cb(stt_h stt)
    }
 }
 
+// Unset
 void 
 unset_state_changed_cb(stt_h stt)
 {
@@ -168,8 +172,9 @@ unset_state_changed_cb(stt_h stt)
          • Default language changed -

            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.

            +

            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:

            +// Callback
 void 
 default_language_changed_cb(stt_h stt, const char* previous_language,
                             const char* current_language, void* user_data)
@@ -177,6 +182,7 @@ default_language_changed_cb(stt_h stt, const char* previous_language,
    // Your code 
 }
 
+// Set
 void 
 set_default_language_changed_cb(stt_h stt)
 {
@@ -188,6 +194,7 @@ set_default_language_changed_cb(stt_h stt)
    }
 }
 
+// Unset
 void 
 unset_default_language_changed_cb(stt_h stt)
 {
@@ -202,9 +209,10 @@ unset_default_language_changed_cb(stt_h stt)
          • Recognition result -

            To get the STT recognition result, set the recognition result callback function.

            -

            The stt_foreach_detailed_result() function retrieves the time stamp of the current recognition result, so it can be called within the stt_recognition_result_cb() callback function.

            +

            To get the STT recognition result, set the recognition result callback.

            +

            Within the callback, use the stt_foreach_detailed_result() function to trigger a result time callback that retrieves the time stamp of the current recognition result.

            +// 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)
@@ -212,6 +220,7 @@ result_time_cb(stt_h stt, int index, stt_result_time_event_e event, const char*
    // 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)
@@ -226,6 +235,7 @@ recognition_result_cb(stt_h stt, stt_result_event_e event, const char** data,
    // Your code 
 }
 
+// Set
 void 
 set_recognition_result_cb(stt_h stt)
 {
@@ -237,6 +247,7 @@ set_recognition_result_cb(stt_h stt)
    }
 }
 
+// Unset
 void 
 unset_recognition_result_cb(stt_h stt)
 {
@@ -251,14 +262,16 @@ unset_recognition_result_cb(stt_h stt)
          • Error -

            When an error occurs, the STT library sends an error message using a callback function:

            +

            When an error occurs, the STT library sends an error message using a callback:

            +// Callback 
 void 
 error_cb(stt_h stt, stt_error_e reason, void* user_data)
 {
    // Your code 
 }
 
+// Set
 void 
 set_error_cb(stt_h stt)
 {
@@ -270,12 +283,13 @@ 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
    }
@@ -285,15 +299,10 @@ unset_error_cb(stt_h stt)
 
 
            Getting Information
            
 
-
            To get information of the current STT state and the languages used:
            
-
            1. To use the functions and data types of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application:
-
              -#include <stt.h>
              
-
              2. 
-
            2. You can obtain the current STT state, the list of supported languages, and the current language:
              
+
              To obtain the current STT state, the list of supported languages, and the current language:
              
 
                
-
              • Get the current state.
-
                The STT state is changed by other functions. It is also applied as a precondition for each function. Get the current state using the stt_get_state() function.
                
+
              • Get the current state using the stt_get_state() function.
+
                The STT state is changed by various STT functions, and it is applied as a precondition for each function.
                
 
                 void 
 get_state(stt_h stt)
@@ -309,14 +318,15 @@ get_state(stt_h stt)
 
                
 
                • 
 
-
              • Obtain a list of languages supported by the STT using the stt_foreach_supported_languages() function. The stt_supported_language_cb 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.
+
              • Obtain a list of languages supported by the STT using the stt_foreach_supported_languages() function. 
+
                The foreach function triggers a separate callback for each supported language. As long as the callback returns true, the foreach function continues to loop over the supported languages.
                
 
                 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 
@@ -332,7 +342,8 @@ get_supported_language(stt_h stt)
 
                
 
                • 
 
-
              • Get the default language using the stt_get_default_language() function. The recognition of the STT works for this default language if you do not set the language as a parameter of the stt_start() function. You can get a notification about the default language by changing the callback function that changes the default language.
+
              • Get the default language using the stt_get_default_language() function. 
+
                The STT recognition process works for this default language, if you do not set the language as a parameter of the stt_start() function.
                
 
                 void 
 get_default_language(stt_h stt)
@@ -346,17 +357,19 @@ get_default_language(stt_h stt)
    }
 }
 
                
+
                You can get a notification about the default language changes by setting a default language changed callback.
                
 
                • 
 
-
              • Obtain a list of engines supported by the STT using the stt_foreach_supported_engines() function. When this function is called, the stt_supported_engine_cb 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.
+
              • Obtain a list of engines supported by the STT using the stt_foreach_supported_engines() function.
+
                The foreach function triggers a separate callback for each supported engine. As long as the callback returns true, the foreach function continues to loop over the supported engines.
                
 
                 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 
@@ -372,7 +385,7 @@ get_supported_engine(stt_h stt)
 
                
 
                • 
 
-
              • Get or set the current engine, which is used for the STT recognition, using the stt_set_engine() and stt_get_engine() functions.
+
              • Get or set the current engine for the STT recognition using the stt_set_engine() and stt_get_engine() functions.
 
                The supported language, silence detection, and supported recognition types depend on the STT engine.
                
 
                 // Get the engine 
@@ -402,8 +415,8 @@ set_current_engine(stt_h stt, const char* engine_id)
 
                
 
                • 
 
-
              • Get the supported recognition types. Check whether the recognition type defined in the <stt.h> header file is supported.
-
                The normal recognition type, STT_RECOGNITION_TYPE_FREE, 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 STT_RECOGNITION_TYPE_FREE_PARTIAL recognition type, if it is supported by the current engine.
                
+
              • Check whether a recognition type defined in the <stt.h> header file is supported by the current engine.
+
                The normal recognition type, STT_RECOGNITION_TYPE_FREE, means that the whole recognition result is sent at the end of the recognition process. The STT_RECOGNITION_TYPE_FREE_PARTIAL recognition type is used to get a partial recognition result.
                
 
                 void 
 check_supported_recognition_type(stt_h stt)
@@ -411,7 +424,8 @@ 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
@@ -419,19 +433,14 @@ check_supported_recognition_type(stt_h stt)
 }
 
                
 
                • 
-
            
+

          Connecting and Disconnecting the STT

          To operate the STT:

          -
          1. To use the functions and data types of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application: -
            -#include <stt.h>
            -
            2. -

          2. After you create the STT handle, connect the background STT daemon:

            -
              -
            • -

              The stt_prepare() function is asynchronous and the STT state changes to STT_STATE_READY:

              +
                +

              1. After you create the STT handle, connect the background STT daemon with the stt_prepare() function.

                +

                The function is asynchronous and the STT state changes to STT_STATE_READY.

                 void 
@@ -457,7 +466,7 @@ prepare_for_stt(stt_h stt)
              2. -

                The stt_unprepare() function disconnects the STT, and the state is changed to STT_STATE_CREATED:

                +

                When the connection is no longer needed, use the stt_unprepare() function to disconnect the STT, and change the state to STT_STATE_CREATED:

                 void 
@@ -471,28 +480,21 @@ unprepared_for_stt(stt_h stt)
    }
 }
                3. -
            -

          Setting Options and Controlling Recording

          To set the STT options and control recording:

          -
          1. To use the functions and data types of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application: -
            -#include <stt.h>
            -
            2. -

          2. You can set the following STT options:

              -
            • Set silence detection. -

              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 stt_stop() function.

              -

              If you set the silence detection as automatic, STT works as a global STT setting. This option must be set in the STT_STATE_READY state.

              +
            • Set the silence detection. +

              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 stt_stop() function.

              +

              If you set the silence detection as automatic, STT works according to the global STT setting. This option must be set in the STT_STATE_READY state.

               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) 
    {
@@ -503,7 +505,7 @@ set_silence_detection(stt_h stt, stt_option_silence_detection_e type)
            • Set or unset the start sound. -

              To play a sound before the STT recognition starts, call the set_start_sound() function in the STT_STATE_READY state.

              +

              To play a sound before the STT recognition starts, call the stt_set_start_sound() function in the STT_STATE_READY state.

              @@ -511,7 +513,7 @@ set_silence_detection(stt_h stt, stt_option_silence_detection_e type) - +
              Note
              The sound file path must be a full path. The sound type supports only the WAV format.The sound file path must be a full path. Only WAV format sound files are supported.
              @@ -542,7 +544,7 @@ unset_start_sound(stt_h stt)
            • Set or unset the stop sound. -

              To play a sound when the STT stops, use the stt_set_stop_sound() function in the STT_STATE_READY state:

              +

              To play a sound when the STT recognition stops, use the stt_set_stop_sound() function in the STT_STATE_READY state:

              @@ -550,7 +552,7 @@ unset_start_sound(stt_h stt) - +
              Note
              The sound file path must be a full path. The sound type supports only the WAV format.The sound file path must be a full path. Only WAV format sound files are supported.
              @@ -580,32 +582,28 @@ unset_stop_sound(stt_h stt)
              • -
            • Start, stop, and cancel recognition: +
            • Start, stop, and cancel the recognition:
                -

              • To start recording, use the stt_start() function. The connected STT daemon starts recording, and the state is changed to STT_STATE_RECORDING.

                +

              • To start recording, use the stt_start() function.

                +

                The connected STT daemon starts recording, and the state is changed to STT_STATE_RECORDING.

                - + -
                Note
                If the stt_start() function fails, check the error code. You can get the following error codes: -
                  -
                • STT_ERROR_RECORDER_BUSY
                  • -
                • STT_ERROR_OUT_OF_NETWORK
                  • -
                • STT_ERROR_INVALID_STATE
                  • -
                • STT_ERROR_INVALID_LANGUAGE
                  • -
                		If the stt_start() function fails, check the error code and take appropriate action.

                The language and recognition type must be supported by the current STT engine. If you set NULL as the language parameter, the STT default language is selected using the stt_get_default_language() function.

                + +

                The language and recognition type must be supported by the current STT engine. If you set NULL as the language parameter, the STT default language is used based on the stt_get_default_language() function.

                 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
@@ -614,7 +612,8 @@ start(stt_h stt, const char* language, const char* type)
                • -

              • When the STT recording is in process, you can retrieve the current recording volume using the stt_get_recording_volume() 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.

                +

              • While the STT recording is in process, you can retrieve the current recording volume using the stt_get_recording_volume() 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.

                 void 
 get_volume(stt_h stt)
@@ -630,7 +629,8 @@ get_volume(stt_h stt)
              • -

                To stop recording and get the recognition result, use the stt_stop() function. The state is changed to STT_STATE_PROCESSING. The result is sent as a recognition result callback and the state is changed back to STT_STATE_READY.

                +

                To stop the recording and get the recognition result, use the stt_stop() function.

                +

                The recording stops and the state is changed to STT_STATE_PROCESSING. When the recognition result has been processed, the result is sent in the recognition result callback and the state is changed back to STT_STATE_READY.

                 void 
 stop(stt_h stt)
@@ -645,7 +645,8 @@ stop(stt_h stt)
              • -

                To stop recording without getting the result, use the stt_cancel() function. It changes the state to STT_STATE_READY.

                +

                To cancel the recording without getting the result, use the stt_cancel() function.

                +

                The state changes to STT_STATE_READY.

                 void 
 cancel(stt_h stt)
@@ -661,7 +662,7 @@ cancel(stt_h stt)
              • -
          + diff --git a/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm index a71d7bc..4a42449 100644 --- a/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm @@ -25,7 +25,7 @@

          Related Info

          @@ -49,18 +49,18 @@

          TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data

          -

          This tutorial demonstrates how you can synthesize text into sound data as utterance and play, pause, and stop it.

          +

          This tutorial demonstrates how you can synthesize text into sound data as utterances, and then play the sound data.

          Warm-up

          Become familiar with the TTS API basics by learning about:

          • Set-up -

            Creating and Destroying TTS Handles

            +

            Initializing the TTS

            -

            To create and destroy TTS handles:

            +

            To initialize the TTS:

            1. To use the functions and data types of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application: 
               #include <tts.h>
              2. -

            2. 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 TTS_STATE_CREATED.

              +

            3. To use the TTS library, create a TTS handle.

              +

              The TTS handle is used in other TTS functions as a parameter. After the handle creation, the TTS state changes to TTS_STATE_CREATED.

              @@ -95,7 +96,7 @@ - +
              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.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.
              @@ -116,16 +117,7 @@ create_tts_handle()

            4. When you no longer need the TTS library, destroy the TTS handle using the tts_destroy() function:

              - - - - - - - - - -
              Note
              Do not use the tts_destroy() function within the callback function, or the tts_destroy() function fails and returns TTS_ERROR_OPERATION_FAILED.
              + 
               void 
@@ -138,27 +130,39 @@ destroy_tts_handle(tts_h tts)
       // Error handling
    }
 }
-
            + + + + + + + + + + +
            Note
            Do not use the tts_destroy() function in a callback function. Within a callback, the tts_destroy() function fails and returns TTS_ERROR_OPERATION_FAILED.
            +

        Setting and Unsetting Callbacks

        +

        The enum values, as well as the parameter details, for the callback parameters are defined in the tts.h header file.

        To set and unset callbacks:

        -
        1. To use the functions and data types of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> 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. -
          -#include <tts.h>
          -
          2. -

        2. 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 TTS_STATE_CREATED state.

          +
            +

          1. The TTS provides various callbacks to get information, such as the state changes and start or completion of an utterance.

            +

            Set the callbacks in the TTS_STATE_CREATED state.

            You can use the following callbacks:

            • State changed -

              If you set the state change callback for the TTS, it is invoked when the TTS state changes.

              +

              If you set the state change callback, it is invoked when the TTS state changes.

              +// 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)
 {
@@ -170,6 +174,7 @@ set_state_changed_cb(tts_h tts)
    }
 }
 
+// Unset
 void 
 unset_state_changed_cb(tts_h tts)
 {
@@ -184,8 +189,9 @@ unset_state_changed_cb(tts_h tts)
            • Default voice changed -

              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.

              +

              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:

              +// 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)
@@ -193,6 +199,7 @@ default_voice_changed_cb(tts_h tts, const char* previous_language, int previous_
    // Your code 
 }
 
+// Set
 void 
 set_default_voice_changed_cb(tts_h tts)
 {
@@ -204,6 +211,7 @@ set_default_voice_changed_cb(tts_h tts)
    }
 }
 
+// Unset
 void 
 unset_default_language_changed_cb(tts_h tts)
 {
@@ -218,20 +226,23 @@ unset_default_language_changed_cb(tts_h tts)
            • Utterance started or completed -

              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.

              +

              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:

              +// 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)
 {
@@ -249,6 +260,7 @@ set_utterance_cb(tts_h tts)
    }
 }
 
+// Unset
 void 
 unset_utterance_cb(tts_h tts)
 {
@@ -268,14 +280,16 @@ unset_utterance_cb(tts_h tts)
            • Error -

              When an error occurs, the TTS library sends a message using the following callback function:

              +

              When an error occurs, the TTS library sends a message using a callback:

              +// 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)
 {
@@ -287,6 +301,7 @@ set_error_cb(tts_h tts)
    }
 }
 
+// Unset
 void 
 unset_error_cb(tts_h tts)
 {
@@ -303,15 +318,10 @@ unset_error_cb(tts_h tts)
 
 
              Getting Information
              
 
-
              To get information of the current TTS state and the voices used:
              
-
              1. To use the functions and data types of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application:
-
                -#include <tts.h>
                
-
                2. 
-
              2. You can obtain the current state, the supported voice list, and the current voice:
                
+
                To obtain the current state, the supported voice list, and the current voice:
                
 
                  
-
                • Get the current state.
-
                  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 tts_get_state() function.
                  
+
                • Get the current state using the tts_get_state() function.
+
                  The TTS state is changed by various TTS functions, and it is applied as a precondition of each function.
                  
 
                   void 
 get_state(tts_h tts)
@@ -327,14 +337,15 @@ get_state(tts_h tts)
 
                  
 
                  • 
 
-
                • Obtain a list of voices supported by the TTS using the tts_foreach_supported_voices() function. The tts_supported_voice_cb 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.
+
                • Obtain a list of voices supported by the TTS using the tts_foreach_supported_voices() function. 
+
                  The foreach function triggers a separate callback for each supported voice. As long as the callback returns true, the foreach function continues to loop over the supported voices.
                  
 
                   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 
@@ -350,7 +361,8 @@ get_supported_voice(tts_h tts)
 
                  
 
                  • 
 
-
                • Get the default voice using the tts_get_default_voice() function. If you do not set the language and the voice type as parameters of the tts_add_text() function, the TTS synthesizes the text using the default voice. To get notified about the default voice changing, use the following functions.
+
                • Get the default voice using the tts_get_default_voice() function.
+
                  The TTS synthesizes the text using the default voice, if you do not set the language and the voice type as parameters of the tts_add_text() function.
                  
 
                   void 
 get_default_voice(tts_h tts)
@@ -365,19 +377,14 @@ get_default_voice(tts_h tts)
    }
 }
 
                  
+
                  You can get a notification about the default voice changes by setting a default voice changed callback.
                  
 
                  • 
-
              
+

            Getting and Setting the Mode

            -

            To get and set the mode:

            -
            1. To use the functions and data types of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application: -
              -#include <tts.h>
              -
              2. -

            2. There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is TTS_MODE_DEFAULT, 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 TTS_STATE_CREATED state.

              - - +

              There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is TTS_MODE_DEFAULT, 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.

              +
              @@ -387,6 +394,8 @@ get_default_voice(tts_h tts)
              Note
              +

              Get and set the mode in the TTS_STATE_CREATED state:

              + 
               void 
@@ -412,19 +421,15 @@ get_mode(tts_h tts)
       // Error handling
    }
 }
-
            +

            Connecting and Disconnecting TTS

            To operate the TTS:

            -
            1. To use the functions and data types of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application: -
              -#include <tts.h>
              -
              2. +
                -

              1. 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:

                -
                  -

                • The tts_prepare() function is asynchronous, and the state of the TTS is changed to TTS_STATE_READY.

                  +

                • After you create the TTS handle, connect the background TTS daemon with the tts_prepare() function.

                  +

                  The daemon synthesizes the text with the engine and plays the resulting sound data. The function is asynchronous and the TTS state changes to TTS_STATE_READY.

                   void 
@@ -444,13 +449,13 @@ prepare_for_tts(tts_h tts)
 		 Note 
 		 
 		 
-		 If you can get the error callback after using the tts_prepare() function, the TTS is not available. 
+		 If you get the error callback after calling the tts_prepare() function, TTS is not available.
                  • -

                • The tts_unprepare() function is used for disconnection, and the state is changed back to TTS_STATE_CREATED.

                  +

                • When the connection is no longer needed, use the tts_unprepare() function to disconnect the TTS and change the state to TTS_STATE_CREATED:

                   void 
@@ -465,17 +470,12 @@ unprepared_for_tts(tts_h tts)
 }
                  • - -
              +

            Adding Text

            +

            There are defined values, TTS_VOICE_TYPE_AUTO and TTS_VOICE_SPEED_AUTO for following the default TTS setting. Those values, and the minimum and maximum limits for the speed, are defined in the tts.h header file.

            To add text:

            -
            1. To use the functions and data types of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application. There are defined values, TTS_VOICE_TYPE_AUTO and TTS_VOICE_SPEED_AUTO for following the default TTS setting. The minimum and maximum limits for the speed are also defined in the header file. -
              -#include <tts.h>
              -
              2. -
            2. To manage text:

              • You can request the TTS library to read your own text using the tts_add_text() 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.

                @@ -486,12 +486,12 @@ unprepared_for_tts(tts_h tts) 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. + 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. -

                When you do not set the language and use NULL for the language, the default language is used for synthesizing text.

                +

                When you do not set the language and use NULL for it, the default language is used for synthesizing text.

                You can add text at any point after the tts_prepare() function changes the state to TTS_STATE_READY.

                @@ -515,7 +515,8 @@ add_text(tts_h tts)
              • -

                There is a length limit for the added text in the engine. To retrieve the maximum value, use the tts_get_max_text_size() function in the TTS_STATE_READY state.

                +

                There is a length limit for the added text in the engine.

                +

                To retrieve the maximum value, use the tts_get_max_text_size() function in the TTS_STATE_READY state:

                 void 
 get_maximum_text_size(tts_h tts)
@@ -530,16 +531,14 @@ get_maximum_text_size(tts_h tts)
 }
                • -
            + -

            Starting, Stopping, and Pausing Playback

            +

            Controlling the Playback

            -

            To start, pause, and stop playback:

            -
            1. To use the functions and data types of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application: -
              -#include <tts.h>
              -
              2. -

            2. To start synthesizing the text added in the queue and play the resulting sound data in sequence, use the tts_play() function. The state is changed to TTS_STATE_PLAYING. The playback continues until you call the tts_stop() or the tts_pause() function.

              +

              To start, pause, and stop the playback:

              +
                +

              • To start synthesizing the text added in the queue and play the resulting sound data in sequence, use the tts_play() function.

                +

                The state is changed to TTS_STATE_PLAYING, and the playback continues until you call the tts_stop() or the tts_pause() function.

                If there is no text in the queue, the TTS waits for text to be added in the TTS_STATE_PLAYING state. In that case, when you add text, the TTS starts synthesizing and playing it immediately. The TTS state need not change to TTS_STATE_READY state before using the tts_stop() function.

                @@ -549,7 +548,7 @@ get_maximum_text_size(tts_h tts) Note - If you get the TTS state changed callback in the TTS_STATE_PLAYING 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. + If you get the TTS state changed callback in the TTS_STATE_PLAYING 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. @@ -566,8 +565,10 @@ start(tts_h tts)    } } - -

                If you want to pause the process, use the tts_pause() function to change the state to TTS_STATE_PAUSED. To resume playback, use the tts_play() function.

                +
                • +
              • +

                To pause the playback, use the tts_pause() function.

                +

                The state is changed to TTS_STATE_PAUSED. To resume playback, use the tts_play() function.

                 void 
 pause(tts_h tts)
@@ -580,7 +581,10 @@ pause(tts_h tts)
    }
 }
                -

                To stop the playback, use the tts_stop() function. All the texts in the queue are removed. The state is changed to TTS_STATE_READY.

                +
                • +
              • +

                To stop the playback, use the tts_stop() function.

                +

                All the texts in the queue are removed, and the state is changed to TTS_STATE_READY.

                 void 
 stop(tts_h tts)
@@ -592,7 +596,7 @@ stop(tts_h tts)
       // Error handling
    }
 }
-
            +
            2. diff --git a/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm index 9586d5e..9110562 100644 --- a/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm @@ -48,7 +48,7 @@
          2. Initializing the Voice Control

            Initialize the Voice control elementary library and create a handle.

          3. Monitoring Language Changes -

            Set and unset a callback to get notifications when the language changes.

            4. +

            Set and unset a callback to get notifications when the system or application language changes.

          4. Retrieving Voice Control Information

            Get information about supported languages, widgets, and actions.

          5. Managing Commands and Hints @@ -76,7 +76,8 @@ initialize_voice_control_elm() }
            6. -
          6. Create a handle for each UI component for which you want to set a command and hint. Use the vc_elm_create_object() function to create a handle for Evas_Objects, and the vc_elm_create_item() function for Elm_Object_Items. +
          7. Create a handle for each UI component for which you want to set a command and hint. +

            Use the vc_elm_create_object() function to create a handle for Evas_Object instances, and the vc_elm_create_item() function for Elm_Object_Item instances.

             void 
 create_vc_elm_handler()
@@ -201,15 +202,15 @@ get_language()
    }
 }
            8. -
          8. Get the languages supported by Voice control elementary library with a callback function that runs for each language separately. -

            The callback cannot be unset: as long as it returns true, it continues to loop over the supported languages.

            +
          9. Get the languages supported by the Voice control elementary library with a foreach function that triggers a separate callback for each language. +

            As long as the callback returns true, the foreach function continues to loop over the supported languages.

             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 
@@ -223,15 +224,15 @@ set_default_language_changed_cb()
    }
 }
            10. -
          10. Get the UI components supported by Voice control elementary library with a callback function that runs for each UI component separately. -

            The callback cannot be unset: as long as it returns true, it continues to loop over the supported UI components.

            +
          11. Get the UI components supported by the Voice control elementary library with a foreach function that triggers a separate callback for each UI component. +

            As long as the callback returns true, the foreach function continues to loop over the supported UI components.

             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 
@@ -245,9 +246,9 @@ set_supported_widget_cb()
    }
 }
            12. -
          12. Get the actions supported by Voice control elementary library for specific UI components with a callback function that runs for each action separately. -

            The callback cannot be unset: as long as it returns true, it continues to loop over the supported actions.

            -

            To translate an actions to corresponding command parameters, use the vc_elm_get_action_command() function.

            +
          13. 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. +

            As long as the callback returns true, the foreach function continues to loop over the supported actions.

            +

            To translate an action to corresponding command parameters, use the vc_elm_get_action_command() function.

             void 
 action_cb(const char *action, void *user_data)
@@ -257,14 +258,14 @@ 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) 
    {
diff --git a/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm
index df17a95..297cd01 100644
--- a/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm
@@ -83,14 +83,14 @@ initialize_voice_control()
      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. 
+     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.
          14. Prepare the Voice control service with the vc_prepare() function, which connects the background Voice control daemon. The daemon records and recognizes audio data and converts sound to text. -

            The vc_prepare() function is asynchronous, and when the preparation succeeds, the voice control state changes from VC_STATE_INITIALIZED to VC_STATE_READY. If the vc_prepare() function fails, the error callback is triggered.

            + 
             void 
@@ -104,8 +104,9 @@ prepare_vc()
    }
 }
            +

            The vc_prepare() function is asynchronous, and when the preparation succeeds, the voice control state changes from VC_STATE_INITIALIZED to VC_STATE_READY. If the vc_prepare() function fails, the error callback is triggered.

            15. -
          15. When voice control is no longer needed, unprepare and deinitialize it: +
          16. When the voice control is no longer needed, unprepare and deinitialize it: 
             void 
 unprepared_vc()
@@ -137,7 +138,7 @@ deinitialize_voice_control()
      Note 
      
      
-     Do not call the vc_deinitialize() function in a callback function. Within a callback function, the vc_deinitialize() function fails and returns VC_ERROR_OPERATION_FAILED. 
+     Do not call the vc_deinitialize() function in a callback. Within a callback, the vc_deinitialize() function fails and returns VC_ERROR_OPERATION_FAILED. 
      
     
   
@@ -163,12 +164,14 @@ deinitialize_voice_control()
 
              
 
            • Set the state change callback to be invoked when the voice control state changes:
 
              +// Callback 
 void 
 state_changed_cb(vc_state_e previous, vc_state_e current, void* user_data)
 { 
    // Your code
 }
 
+// Set
 void 
 set_state_changed_cb()
 {
@@ -179,6 +182,8 @@ set_state_changed_cb()
       // Error handling
    }
 }
+
+// Unset
 void 
 unset_state_changed_cb()
 {
@@ -193,12 +198,14 @@ unset_state_changed_cb()
 
              • 
 
            • Set the service state change callback to be invoked when the Voice control service state changes:
 
              +// 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()
 {
@@ -210,6 +217,7 @@ set_service_state_changed_cb()
    }
 }
 
+// Unset
 void 
 unset_service_state_changed_cb()
 {
@@ -224,12 +232,14 @@ unset_service_state_changed_cb()
 
 
            • Set the current language change callback to be invoked when the system or application language changes:
 
              +// Callback 
 void 
 __current_language_changed_cb(const char* previous, const char* current, void* user_data)
 {
    // Your code
 }
 
+// Set
 void 
 set_current_language_changed_cb()
 {
@@ -241,6 +251,7 @@ set_current_language_changed_cb()
    }
 }
 
+// Unset
 void 
 unset_current_language_changed_cb()
 {
@@ -268,6 +279,7 @@ unset_current_language_changed_cb()
 
              To get the command, use the Voice control APIs with the vc_cmd_list parameter, which is a list of recognized commands. The result parameter contains the recognized text.
                
 
 
              +// Callback
 void 
 __result_cb(vc_result_event_e event, vc_cmd_list_h vc_cmd_list, const char* result, void* user_data)
 {
@@ -304,6 +316,7 @@ __result_cb(vc_result_event_e event, vc_cmd_list_h vc_cmd_list, const char* resu
    return;
 }
 
+// Set
 void 
 set_result_cb()
 {
@@ -315,6 +328,7 @@ set_result_cb()
    }
 }
 
+// Unset
 void 
 unset_result_cb()
 {
@@ -328,12 +342,14 @@ unset_result_cb()
 
              • 
 
            • Set the error callback to be invoked when an error occurs in the voice control process:
 
              +// Callback 
 void 
 __error_cb(vc_error_e reason, void* user_data)
 {
    // Your code
 }
 
+// Set
 void 
 set_error_cb(vc_h vc)
 {
@@ -345,6 +361,7 @@ set_error_cb(vc_h vc)
    }
 }
 
+// Unset
 void 
 unset_error_cb(vc_h vc)
 {
@@ -400,15 +417,15 @@ get_state(vc_h vc)
    }
 }
 
              • 
-
            • Get the supported languages with a callback function that runs for each language separately.
-
              The callback cannot be unset: as long as it returns true, it continues to loop over the supported languages.
              
+
            • Get the supported languages with a foreach function that triggers a separate callback for each language.
+
              As long as the callback returns true, the foreach function continues to loop over the supported languages.
              
 
               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 
@@ -490,7 +507,7 @@ create_command()
 
              
 
              • 
 
            • Add the command to the command list. 
-
              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 vc_cmd_destroy() function.
              
+
              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 vc_cmd_destroy() function.
              
 
               void 
 add_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
@@ -521,18 +538,9 @@ remove_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
 }
 
              
 
-
              To get the commands you have added to the command list, use the vc_cmd_list_foreach_commands() function to get all commands with a callback function at once, or the vc_cmd_list_get_current() function to retrieve the commands without a callback function.
              
-
-   
-    
-     
-      
-     
-     
-      
-     
-    
-  
              Note
              When you get the command handle with the vc_cmd_list_get_current() function, do not release the command handle. To release the command handle, call the vc_cmd_list_remove() function before the vc_cmd_destroy() function.
              
+
              To retrieve the commands you have added to the command list:
              
+
                
+
              • You can use the vc_cmd_list_foreach_commands() function to get each command within a callback function:
 
                 bool 
 __vc_get_command_cb(vc_cmd_h vc_command, void* user_data)
@@ -553,7 +561,21 @@ foreach_command(vc_cmd_list_h vc_cmd_list)
       // Error handling
    }
 }
+
                
+
                • 
+
              • You can use the vc_cmd_list_get_current() function to get the current command in an output parameter.
 
+   
+    
+     
+      
+     
+     
+      
+     
+    
+  
                Note
                When you get the command handle with the vc_cmd_list_get_current() function, do not release it. To release the command handle, call the vc_cmd_list_remove() function before the vc_cmd_destroy() function.
                
+
                 void 
 get_commands(vc_cmd_list_h vc_cmd_list)
 {
@@ -611,7 +633,8 @@ get_commands(vc_cmd_list_h vc_cmd_list)
    } while (VC_ERROR_ITERATION_END != ret);
 }
 
                
-  
+
                • 
+
              
 
              • 
 
            • Register the commands for recognition by setting the command list to the voice control.
 
              If you want to update registered commands, set the command list again with the updated commands.
              
@@ -631,6 +654,7 @@ set_command(vc_cmd_list_h vc_cmd_list, int type)
 
            • When no longer needed, unset the command list, and destroy the command and command list handles.
 
              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 vc_cmd_list_destroy() function to true.
              
 
              +// Unset the command list
 void 
 unset_command(int type)
 {
@@ -642,6 +666,7 @@ unset_command(int type)
    }
 }
 
+// Destroy the command handle
 void 
 destroy_command(vc_cmd_h vc_cmd)
 {
@@ -653,6 +678,7 @@ destroy_command(vc_cmd_h vc_cmd)
    }
 }
 
+// Destroy the command list handle
 void 
 destroy_command_list(vc_cmd_list_h vc_cmd_list)
 {
diff --git a/org.tizen.tutorials/html/native/web/web_tutorials_n.htm b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
index 864937d..6af26a6 100644
--- a/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
@@ -25,15 +25,13 @@
 		
              
+
              The sample browser created in this tutorial also requires the <Ecore.h>, <Ecore_Evas.h>, <Ecore_Getopt.h>, <Eet.h>, <Eina.h>, <Elementary.h>, <Evas.h>, and <app.h> header files.
              
+
+
              • 
+
            • To use the sample browser, set the following privileges in the manifest file of the application:
 
  
-		     
+	 
-		     
+	 
@@ -118,7 +117,7 @@
      
-		     
+	 
@@ -130,7 +129,7 @@
      
-		     
+	 
@@ -142,8 +141,7 @@
     
               
    
@@ -106,11 +105,11 @@
      
     
               
 	http://tizen.org/privilege/appmanager.launchAllows the application to open another application conditionally.Allows the application to launch another application conditionally.	     
     
              
     
               
 	http://tizen.org/privilege/content.writeAllows the application to create, update and delete content.Allows the application to create, update, and delete content.	     
     
              
     
               
 	http://tizen.org/privilege/internet
               
      
               
 	http://tizen.org/privilege/notificationAllows the application to provide user notifications, such as messages and badgesAllows the application to provide user notifications, such as messages and badges.	     
     
               
     
               
 	http://tizen.org/privilege/location
              
     
               
 	http://tizen.org/privilege/externalstorageAllows the application to access, read and write to the external storage.Allows the application to access, read, and write to the external storage.	     
     
              
     
               
 	http://tizen.org/privilege/display
              
                   
   
               
              • 
-
            • The sample browser uses several Evas objects to build the browser UI. To easily manage the UI elements, use the Browser_window data structure. The browser window data is stored in a Browser_window structure that contains 2 Evas_Object instances.
-
+
            • 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 Evas_Object instances) in the Browser_window data structure:
 
               typedef struct 
 _Browser_Window
@@ -170,21 +168,16 @@ main(int argc, char *argv[])
 }
 
              • 
 
-
            • To create a window, call the window_create() function in the br_app_create() function.
-
+
            • To create a window, call the window_create() function in the br_app_create() life-cycle callback function:
 
               window = window_create(NULL, 0, 0, EINA_FALSE);
          -

          Creating and Deleting a Window Object

          +

          Creating a Window Object

          -

          To create and delete a window object:

          +

          To create a window object:

            -
          1. To create a window object, use the elm_win_add() function. - -

            You can add a smart callback to your window using the evas_object_smart_callback_add() function.

            - -

            The function adds a callback to the event specified by the event on the smart object (smart event).

            +
          2. To create a window object, use the elm_win_add() function: 
             static Browser_Window*
@@ -203,13 +196,15 @@ window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
 
    // 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);
-}
            3. -
          3. An application also needs a callback fired for the window deletion event. In the callback's body of implementation, call the window_close() function for a returned object of the window_find_with_elm_window() function. +
          4. Add a smart callback to the window to handle the window deletion event. +

            In the callback, call the window_close() function for the object returned from the window_find_with_elm_window() function call.

            +   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)
 {
@@ -218,14 +213,29 @@ on_window_deletion(void *user_data, Evas_Object *elm_window, void *event_info)
          -

          Setting the Window Layout

          +

          Setting the Window Layout and View

          -

          Create the window layout.

          +

          Create the layout for the browser window. The layout contains 2 boxes:

          +
            +
          • vertical_layout contains the view object that displays the browser pages.
            • +
          • horizontal_layout is a top bar that contains the buttons used to move between browser pages.
            • +

          Figure: Window layout

          Window layout

          -

          For this purpose, create new boxes (vertical_layout and horizontal_layout) using the elm_box_add() function:

          + +
            +

          1. Create new boxes:

            +
              +
            1. Add the boxes using the elm_box_add() function.
              2. +
            2. Set the hints for the object weight using the evas_object_size_hint_weight_set() function. +

              The EVAS_HINT_EXPAND and EVAS_HINT_FILL are macro definitions for the values 1.0 and -1.0.

              3. +
            3. Add the vertical_layout box as a resize subobject of the window using the elm_win_resize_object_add() function. +

              The resize subobject size and position are controlled by the window directly.

              4. +
            4. Add a subobject at the end of the pack list using the elm_box_pack_end() function.
              5. +
            5. Make the object visible using the evas_object_show() function.
              6. +
             // Create vertical layout
@@ -243,13 +253,13 @@ evas_object_size_hint_align_set(horizontal_layout, EVAS_HINT_FILL, 0.0);
 elm_box_pack_end(vertical_layout, horizontal_layout);
 evas_object_show(horizontal_layout);
            - -

            The evas_object_size_hint_weight_set() function sets the hints for an object's weight. EVAS_HINT_EXPAND is a macro definition for a value 1.0 (EVAS_HINT_FILL for -1.0). The elm_win_resize_object_add() function adds a subobject as the resize object of the object. The evas_object_show() function makes an object visible. The elm_box_pack_end() function adds a subobject at the end of the pack list.

            - - -

            Setting the Window View

            +
            2. -

            Create a window view and set the user agent. To create the view, use the ewk_view_add() function. The view is an object that displays pages in the browser. To set the user agent, use the ewk_view_user_agent_set() function.

            +
          2. Create a window view to display the browser pages and set the user agent: +
              +
            • To create the view, use the ewk_view_add() function.
              • +
            • To set the user agent, use the ewk_view_user_agent_set() function.
              • +
             static Browser_Window*
@@ -260,45 +270,29 @@ window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
 
    ewk_view_user_agent_set(window->ewk_view, user_agent_string);
 }
            - +
            3. +

          Handling Key and Mouse Events

          -

          To handle mouse or key events, corresponding callbacks need to be set by calling the evas_object_event_callback_add() function.

          +

          To handle mouse or key events in the window:

          +
            +
          1. Set callbacks for the mouse and key events using the evas_object_event_callback_add() function: 
             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); 
 }
            - - - - - - - - - - - - - - - - - - - - -
            - Table: Key and mouse callbacks -
            EventCallbackCallback type
            Key downEVAS_CALLBACK_KEY_DOWNstatic void on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info);
            Mouse downEVAS_CALLBACK_MOUSE_DOWNstatic void on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info);
            - -

            To handle pressed key modifiers, such as Ctrl or Alt, the evas_key_modifier_is_set() function must be called. To get the Evas_Modifier object that contains information about which key modifiers are registered, call the evas_key_modifier_get() function, passing the Evas canvas object as an argument.

            +
            2. +
          2. Define the key event down callback. +

            The ev->key instance contains the name of the key that caused the event.

            +

            To handle pressed key modifiers, such as Ctrl or Alt, use the evas_key_modifier_is_set() function. To get the Evas_Modifier object that contains information about which key modifiers are registered, call the evas_key_modifier_get() function, passing the Evas canvas object as a parameter.

             static void 
@@ -313,8 +307,9 @@ on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info)
 }
            -

            Now ev->key contains the name of the key that caused the event trigger. For example, to check whether the combination Alt + Left Arrow was pressed, (!strcmp(ev->key, "Left") && altPressed) must evaluate to TRUE.

            +

            For example, if the Alt + Left Arrow key combination is pressed, the (!strcmp(ev->key, "Left") && altPressed) statement must evaluate to TRUE.

            +

            The following table shows how the key combinations match to specific view functions.

            - - + + - - + + - - + + - - + + - - + +
            Table: Key behavior @@ -327,33 +322,35 @@ on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info)
            Alt+LeftBack viewewk_view_backGo to the previous view in the browsing history.ewk_view_back()
            Alt+RightForward viewewk_view_forwardGo to the next view in the browsing history.ewk_view_forward()
            F5Reload viewewk_view_reloadReload the view.ewk_view_reload()
            Alt+F5Reload view bypassing cacheewk_view_bypass_cacheReload the view bypassing the cache.ewk_view_bypass_cache()
            F6Stopewk_view_stopStop loading the view.ewk_view_stop()
            - -

            The mouse down event information is stored in Evas_Event_Mouse_Down. Similarly as in key events, ev->button contains information on which button was pressed. In this example, pressing the first button calls the view_focus_set() function to update the focus.

            +
            3. +
          3. Define the mouse down event callback. +

            The mouse down event information is stored in the Evas_Event_Mouse_Down instance. Similarly as in the key events, the ev->button instance contains information on which button was pressed.

            +

            In the following example, pressing the first button calls the view_focus_set() function to update the focus:

             static void 
@@ -366,25 +363,32 @@ on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info)
       view_focus_set(window, EINA_TRUE); 
 }
            +
            4. +
          -

          Showing a Window and Setting the Focus

          +

          Showing the Window and Setting the Focus

          -

          In EFL, the UI focus control is implemented in an Elementary object, not an Evas_Object. Therefore, the application using EWK derived from an Evas_Object must control the focus itself. For example, steal focus away from the elm_window object and give it to the ewk_view.

          -

          To set the focus to an ewk_view, use the elm_object_focus_set() and evas_object_focus_set() functions.

          +

          In EFL, the UI focus control is implemented in an Elementary, not Evas, object. Therefore, the application using EWK derived from an Evas_Object must control the focus itself.

          +

          To show the window with the view object (ewk_view) and set the focus to the view:

          +
            +
          1. +

            Steal focus away from the elm_window object and give it to the ewk_view.

            +

            Unfocus the window with the elm_object_focus_set() function, and move the focus to the view with the evas_object_focus_set() function:

             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); 
 };
            - -

            Call this function in the window_create() function.

            +
            2. +
          2. +

            Within the window_create() function, use the evas_object_show() function to make the window visible, and call the view_focus_set() function to perform the focus change defined above:

             window_create()
@@ -399,13 +403,17 @@ window_create()
    return window;
 }
            - -

            The evas_object_show() function makes the given Evas object visible.

            - +
            3. +

          Finding a Window

          -

          This example uses 2 helper functions for finding window structures. The first one, the window_find_with_elm_window() function, takes elm_window as an argument and returns a pointer to the Browser_Window object that the window is part of. The second one, the window_find_with_ewk_view() function, does the same for ewk_view. Both of them use the EINA_LIST_FOREACH macro to iterate over the windows list.

          +

          You can use helper functions to find window structures:

          +
            +
          • The window_find_with_elm_window() helper function takes the elm_window as a parameter and returns a pointer to the Browser_Window object that the window is part of.
            • +
          • The window_find_with_ewk_view() function does the same for ewk_view.
            • +
          +

          Both functions use the EINA_LIST_FOREACH macro to iterate over the window list.

           static Browser_Window*
@@ -444,20 +452,25 @@ window_find_with_ewk_view(Evas_Object *ewk_view)
    } 
 
    return NULL; 
-}
          +} +

          Finalizing the Application

          -

          To close the application correctly, use the ewk_shutdown() function. This function cleans up any resources your application has allocated.

          +

          To close the application correctly:

          +
            +
          1. To clean up any resources your application has allocated, use the ewk_shutdown() function in the termination life-cycle callback: 
             static void 
 br_app_terminate(void *app_data)
 {
    ewk_shutdown();
-}
            - -

            In the main function, register the termination callback:

            +} + +
            2. +
          2. +

            In the main() function, register the termination callback:

             main()
@@ -468,6 +481,8 @@ main()
    return ui_app_main(argc, argv, &ops, &window);
 }
            +
            3. +
          diff --git a/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm index d741f6f..747bba6 100644 --- a/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm @@ -168,8 +168,8 @@ var appControlReplyCB =
        3. Call the launchAppControl() method to find a suitable application to select the images: 
           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);
        diff --git a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm index 7cdad48..2a078e2 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm @@ -265,11 +265,11 @@ adapter.cardEmulationMode = "OFF";

      3. Specify an AID value for receiving HCE transaction events:

        1. -

          To tell the platform which AID groups are requested by application, a metadata element must be included in the config.xml file:

          +

          To tell the platform which AID groups are requested by the application, a metadata element must be included in the config.xml file:

           <?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"/>
@@ -309,7 +309,7 @@ adapter.cardEmulationMode = "OFF";
 
          • on: The card can work when the device is on.
            • 
 
          • off: The card can work when the device is off.
            • 
 
          • sleep: The card can work when the device is in the sleep mode.
          2. -
        +

    13. Declare the required variables and obtain the NFCAdapter object (in mobile and wearable applications) using the getDefaultAdapter() method of the NFCManager interface (in mobile and wearable applications).

      To enable NFC card emulation, change the value of the cardEmulationMode attribute.

      @@ -318,7 +318,9 @@ var adapter = tizen.nfc.getDefaultAdapter();
 
 adapter.cardEmulationMode = "ALWAYS_ON";
      14. -

    14. To detect the HCE event, use the addHCEEventListener() method of the NFCAdapter interface to register a listener.

      Use the sendHostAPDUResponse() method of the NFCAdapter 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.

      +
    15. +

      To detect the HCE event, use the addHCEEventListener() method of the NFCAdapter interface to register a listener.

      +

      Use the sendHostAPDUResponse() method of the NFCAdapter 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.)

       var successCB = function()
 {
@@ -332,23 +334,23 @@ var errorCB = 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);
    }
 });
-
      16. -
    16. To register an AID for a specific category and secure element type, use the registerAID() method of the NFCAdapter interface: +
      17. +
    17. To register an AID for a specific category and secure element type, use the registerAID() method of the NFCAdapter interface: 
       try 
 {
diff --git a/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
index 0d85495..a2c00e9 100644
--- a/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
@@ -177,7 +177,7 @@ tizen.application.launchAppControl(new tizen.ApplicationControl("http://tiz
 
      The application sends a message by calling the sendMessage() function. 
      
 
       var remoteMsgPort = tizen.messageport.requestRemoteMessagePort("websvcapp0.service1", "SERVICE_SAMPLE2");
-remoteMsgPort.sendMessage([{ key : "key", value : "SERVICE_EXIT" }]);
+remoteMsgPort.sendMessage([{key : "key", value : "SERVICE_EXIT"}]);
      18. diff --git a/org.tizen.ui.practices/html/native/efl/button_tutorial_wn.htm b/org.tizen.ui.practices/html/native/efl/button_tutorial_wn.htm index 4ccf091..0bed5c9 100644 --- a/org.tizen.ui.practices/html/native/efl/button_tutorial_wn.htm +++ b/org.tizen.ui.practices/html/native/efl/button_tutorial_wn.htm @@ -152,19 +152,22 @@ evas_object_show(button3);

      To manage button events:

      + +

      Setting the Angle Details

      -

      Setting the Angle Offset

      +

      To set the angle details of the circle object:

      -

      To set the angle offset:

      + -

      Setting the Value

      +

      Setting the Line Width, Color, and Radius

      -

      To set the value:

      +

      To set the line width, color, and radius of the circle object:

      - - - - - - - - - -
      Note
      The value cannot be lower than the minimum value or higher than the maximum value.
      + - -

      Setting the Color

      - -

      To set the color:

      +
    18. Set the color:
      • -

        Set the color of the circle object with the eext_circle_object_color_set() function.

        -

        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 eext_circle_object_color_get() function.

        +

        To set the color of the circle object, use the eext_circle_object_color_set() function.

        +

        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:

         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
        +

        To get the current color of circle object, use the eext_circle_object_color_get() function.

      • -

        Set the color of a certain item in a circle object with the eext_circle_object_item_color_set() function.

        -

        If the name of the item is passed as default, it works the same way as the eext_circle_object_color_set() 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 eext_circle_object_item_color_get() function.

        +

        To set the color of a certain item in a circle object, use the eext_circle_object_item_color_set() function.

        +

        If the name of the item is passed as default, the function works the same way as the eext_circle_object_color_set() function. Similar to the above example, the following example creates a circle object with a surface and sets its color to red:

         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);
        +

        To get the current color of the item, use the eext_circle_object_item_color_get() function.

        • -
      - -

      Setting the Radius

      - -

      To set the radius:

      +
      19. +
    19. Set the radius:
      • -

        Set the radius of the circle object with the eext_circle_object_radius_set() function.

        -

        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 eext_circle_object_radius_get() function.

        +

        To set the radius of the circle object, use the eext_circle_object_radius_set() function.

        +

        In the following example, a circle object with a radius of 50.0 is created:

         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_radius_set(circle_obj, 50.0);
        +

        To get the current radius of the circle object, use the eext_circle_object_radius_get() function.

      • -

        Set the radius of a certain item in a circle object with the eext_circle_object_item_radius_set() function.

        -

        If the name of the item is passed as default, it works the same way as the eext_circle_object_radius_set() 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 eext_circle_object_item_radius_get() function.

        +

        To set the radius of a certain item in a circle object, use the eext_circle_object_item_radius_set() function.

        +

        If the name of the item is passed as default, the function works the same way as the eext_circle_object_radius_set() function. Similar to the above example, the following example creates a circle object with a radius of 50.0:

         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_radius_set(circle_obj, "default", 50.0);
        +

        To get the current radius of the item, use the eext_circle_object_item_radius_get() function.

        • -
      +
      20. -

      Disabling a Circle Object

      +

      Disabling the Circle Object

      -

      Disable the circle object with the eext_circle_object_disabled_set() function.

      -

      In the following example, a circle object is disabled. You can get the current disabled status of circle object with the eext_circle_object_disabled_get() function.

      +

      To disable the circle object, use the eext_circle_object_disabled_set() function:

       Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_disabled_set(circle_obj, EINA_TRUE);
      +

      To enable a disabled circle object, use the same function with the EINA_FALSE parameter.

      -

      Enable a disabled circle object with the eext_circle_object_disabled_set() function with the EINA_FALSE parameter:

      -
      -eext_circle_object_disabled_set(circle_obj, EINA_FALSE);
-
      - - +

      To get the current disabled status of the circle object, use the eext_circle_object_disabled_get() function.

      diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_option_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_option_wn.htm index 8de875d..692a1b3 100644 --- a/org.tizen.ui.practices/html/native/efl/component_circ_option_wn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_circ_option_wn.htm @@ -22,10 +22,9 @@

      Content

      Related Info

      @@ -42,44 +41,75 @@

      This feature is supported in wearable applications only.

      -

      The more option is one of the wearable circular UI components. The more option handle can use the elm_layout functions, because the more option handle is an elm_layout object.

      +

      The more option component is a wearable circular UI component. The more option handle can use the elm_layout functions, because the more option handle is an elm_layout object.

      -

      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).

      +

      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.

      -

      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.

      +

      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 eext_rotary_object_event_activated_set() function to activate the rotary event, since the function is called automatically according to the elm_panel state.

      -

      Figure: More Option

      -

      More Option

      +

      Figure: More option component

      +

      More option component

      -

      Adding an Eext More Option Object

      -

      To create a more option object, use the eext_more_option_add() function:

      +

      Adding a More Option Component

      +

      To create a more option component, use the eext_more_option_add() function:

       Evas_Object *more_option = NULL;
+
 more_option = eext_more_option_add(parent);
      -

      Activating a Rotary Event

      +

      Adding More Option Items

      + +

      To add an item:

      + +
        +
      1. Append the new item with the eext_more_option_item_append() function: + +
        +{
+   Evas_Object *img = NULL;
+
+   // Append item
+   Eext_Object_Item *item  = eext_more_option_item_append(parent);
+
        2. + +
      2. Configure the item (for more information, see Configuring the More Option and Items). +

        In the following example, the main and sub text are set for the item, and an icon is added as the item content:

        +
        +   // 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);
+}
+
      + -

      You do not need to call the eext_rotary_object_event_activated_set() function for the more option object, since it is called automatically according to the elm_panel state.

      +

      Configuring the More Option and Items

      -

      Configuring the More Option

      +

      To configure the more option cue button direction, and the text and content of various more option parts:

      -

      To configure the direction of the cue button, use the direction state, which has the following values:

      +
        +
      • Configure the direction of the cue button with the eext_more_option_direction_set() function. The second parameter defines the cue button direction, which can be one of the following values:
        • EEXT_MORE_OPTION_DIRECTION_TOP: Cue button is at the top.
        • EEXT_MORE_OPTION_DIRECTION_BOTTOM: Cue button is at the bottom.
        • EEXT_MORE_OPTION_DIRECTION_LEFT: Cue button is on the left.
        • EEXT_MORE_OPTION_DIRECTION_RIGHT: Cue button is on the right (default value).
        -

        To set the cue button direction for the more option:

        +

        To set the cue button on the right:

         eext_more_option_direction_set(more_option, EEXT_MORE_OPTION_DIRECTION_RIGHT);
        +
        • -

        The following table shows the customizable more option parts.

        +
      • 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. +

        The following table shows the configurable more option parts.

        - + @@ -104,45 +134,27 @@ eext_more_option_direction_set(more_option, EEXT_MORE_OPTION_DIRECTION_RIGHT);
        Table: Customizable more option partsTable: Configurable more option parts
        Part

        Item content
        - -

        Adding a More Option Item

        - -

        To add an item, use the eext_more_option_item_append() function and set the item attributes:

        - -
        -{
-   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);
-}
-
        +

      Using the More Option Callbacks

      -

      The more option emits the following signals:

      +

      To receive notifications about the more option events, listen to the following signals:

      -
      • item,selected: User selected the item.
        • -
      • item,clicked: User selected the already selected item again or selected a selector.
        • -
      • more,option,opened: Layout with the rotary selector is shown..
        • -
      • more,option,closed: Layout with the rotary selector is hidden.
      +
      • item,selected: The item is selected.
        • +
      • item,clicked: An already selected item is selected again or a selector has been selected.
        • +
      • more,option,opened: The layout with the rotary selector is shown.
        • +
      • more,option,closed: The layout with the rotary selector is hidden.
      -

      For all these signals, the event_info parameter returned in the callback is NULL.

      +

      In all these signals, the event_info callback parameter is NULL.

      -

      To register and define a callback function called by the clicked signal:

      +

      To register and define a callback for the more,option,opened signal:

       {
-   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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_progressbar_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_progressbar_wn.htm
index 41a7b9f..8fd065f 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_progressbar_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_progressbar_wn.htm
@@ -22,9 +22,9 @@
 	
      
 		
      Content
      
 		
 		
      Related Info
      
 		
        
@@ -40,21 +40,41 @@
 
 
        This feature is supported in wearable applications only.
        
 
-
        The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.
        
+
        The circle progressbar component shows the progress status of a given task with the circular design. It visualizes the progress status within a range.
        
 
-
        Figure: Circle Progressbar
         
-
        Circle Progressbar
         
+
        For more information, see the Efl Extension Circle Progressbar API.
        
+
+
        Figure: Circle progressbar component
         
+
        Circle progressbar component
         
 
-
        Creating a Circle Progressbar
        
+
        Adding a Circle Progressbar Component
        
 
-
        You can create the circle progressbar by using the eext_circle_object_progressbar_add() function. When creating the circle progressbar, a surface is necessary to render on the surface.
        
+
        To create a circle progressbar component, use the eext_circle_object_progressbar_add() function. Pass a circle surface as the second parameter to render the progressbar.
        
 
         Evas_Object *circle_progressbar, *parent;
+
 circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
 
        
 
-
        Using the Circle Object Property
        
-
        Circle progressbar supports the following circle object API calls:
        
+
        Configuring the Circle Progressbar
        
+
+
        Before using the circle progressbar, set its value details:
        
+
+
        • To set the minimum and maximum values, use the eext_circle_object_value_min_max_set() function.
          • 
+
        • To set the current value, use the eext_circle_object_value_set() function.
        
+
+
        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:
        
+
        +eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
+eext_circle_object_value_set(circle_progressbar, 3.0);
+
        
+
+
        Configuring the Circle Properties
        
+
+
        To configure the circle properties of the circle progressbar:
        
+
+
        • 
+
          You can modify the circle object within the circle progressbar component using the following functions:
          
 
            
 	
          • eext_circle_object_value_min_max_set()
            • 
 	
          • eext_circle_object_value_min_max_get()
            • 
@@ -74,23 +94,16 @@ circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
 	
          • eext_circle_object_color_get()
            • 
 	
          • eext_circle_object_disabled_set()
            • 
 	
          • eext_circle_object_disabled_get()
            • 
-
          
-
          A circle progressbar has the following items:
          
+
        
+
      • You can modify the circle progressbar item properties with the eext_circle_object_item_XXX() functions.
         
+
        The circle progressbar has the following items:
        
 
          
 
        • default: Default circle item that draws the progressbar.
          • 
 
        • bg: Progress bar background circle item.
          • 
-
        
-
        You can change the properties of the items by using the eext_circle_object_item* APIs.
        
-
        For more information, see the Efl Extension Circle Progressbar API.
        
+
      
 
-
      Configuring the Circle Progressbar
      
+
      For more information, see Circle Object and the Efl Extension Circle Object API.
      
 
-
      Before using the circle progressbar, its minimum and maximum values are set with the eext_circle_object_value_min_max_set() function. The current value is set with eext_circle_object_value_set().
      
-
      Here, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0.
      
-
      -eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
-eext_circle_object_value_set(circle_progressbar, 3.0);
-
      
 
 
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_rotary_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_rotary_wn.htm
index 3f2d039..03a6201 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_rotary_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_rotary_wn.htm
@@ -22,11 +22,10 @@
 	
      
 		
      Content
      
 		
 		
      Related Info
      
@@ -43,14 +42,14 @@
 
 
      This feature is supported in wearable applications only.
      
 
-
      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.
      
+
      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.
      
 
-
      The rotary selector handle can use the elm_layout APIs, because the rotary selector handle is an elm_layout object.
      
+
      The rotary selector handle can use the elm_layout functions, because the rotary selector handle is an elm_layout object.
      
 
-
      Figure: Rotary Selector
       
-
      Rotary Selector
       
+
      Figure: Rotary selector component
       
+
      Rotary selector component
       
  
-
      Creating a Rotary Selector
      
+
      Adding a Rotary Selector Component
      
 
 
      To create a rotary selector, use the eext_rotary_selector_add() function:
      
 
      @@ -60,40 +59,96 @@ Rotary_selector = eext_rotary_selector_add(parent);
 
      
 
 
      Activating a Rotary Event
      
-
      The rotary selector can be activated and deactivated by using the eext_rotary_object_event_activated_set() function. If the second parameter is set to EINA_TRUE, the created rotary selector can also receive a rotary event.
      
+
      To activate or deactivate the rotary selector, use the eext_rotary_object_event_activated_set() function:
      
 
       eext_rotary_object_event_activated_set(rotary_selector, EINA_TRUE);
 
      
 
-
      Configuring the Selector and Item State
      
-
      You can configure the selector and item states:
      
+
      If the second parameter is EINA_TRUE, the rotary selector can receive rotary events.
      
 
-
      • The available selector states are:
+
        Adding Rotary Selector Items
        
 
-
        • EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL: Selector is in a normal state.
          • 
-
        • EEXT_ROTARY_SELECTOR_SELECTOR_STATE_PRESSED: Selector is in a pressed state.
        
+   
+    
+     
+      
+     
+     
+      
+     
+    
+  
        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.
         
+
+
        To add an item:
        
+
+
          
+
        1. Append the new item with the eext_rotary_selector_item_append() function:
 
-
          For example, to set the selector color for a normal state selector:
          
 
          -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);
 
          2. 
-
        2. The available selector item states are:
-
          • EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL: Item is in a normal state.
            • 
-
          • EEXT_ROTARY_SELECTOR_ITEM_STATE_PRESSED: Item is in a pressed state.
          
 
-
          For example, to set the item color for a normal state item:
          
+
        3. Configure the item (for more information, see Configuring the Selector and Items).
+
          In the following example, 2 icons are set for the item and selector:
          
+
 
          -eext_rotary_selector_item_part_color_set(item, "item,icon", 
-                                         EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, 
-                                         100, 100, 100, 255);
-
      
+// 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);
 
-
      The following table shows the customizable rotary selector parts.
      
+// 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);
+
      + +
    20. Define the item texts. The text is displayed in the selector when the item is selected. +

      In the following example, the main text is defined for the new item:

      +
      +// Set selector main text
+eext_rotary_selector_item_part_text_set(item, "selector,main_text", "Options");
+
      + +

      The following table shows the functions you can use to set the main and sub text of an item.

      - + + + + + + + + + + + + + + + + + +
      Table: Customizable rotary selector partsTable: Item texts
      TextSetting functionView
      selector,main_texteext_rotary_selector_item_part_text_set() +

      eext_rotary_selector_item_domain_translatable_part_text_set()

      main_text

      selector,sub_texteext_rotary_selector_item_part_text_set() +

      eext_rotary_selector_item_domain_translatable_part_text_set()

      sub_text

    + + +

    Configuring the Selector and Items

    + +

    You can configure the color and content of various rotary selector parts.

    +

    The following table shows the configurable rotary selector parts.

    + + + @@ -128,85 +183,46 @@ eext_rotary_selector_item_part_color_set(item, "item,icon",
    Table: Configurable rotary selector parts
    Part
    -

    Setting the Rotary Selector Item Text

    - -

    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.

    +

    You can also configure the selector and item appearance based on their current state:

    - - - - - - - - - - - - - - - - - - -
    Table: Item texts
    TextSetting functionView
    selector,main_texteext_rotary_selector_item_part_text_set() -

    eext_rotary_selector_item_domain_translatable_part_text_set()

    main_text

    selector,sub_texteext_rotary_selector_item_part_text_set() -

    eext_rotary_selector_item_domain_translatable_part_text_set()

    sub_text

    - -

    Adding a Rotary Selector Item

    - - - - - - - - - - -
    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.
    + +

    Using the Rotary Selector Callbacks

    -

    The rotary selector emits the following signals:

    +

    To receive notifications about the rotary selector events, listen to the following signals:

    - + -

    For both signals, the event_info parameter returned in the callback is NULL.

    +

    In both these signals, the event_info callback parameter is NULL.

    -

    To register and define a callback function called by the clicked signal

    +

    To register and define a callback for the item,clicked signal:

     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_scroller_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_scroller_wn.htm
index 68e3470..3387d72 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_scroller_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_scroller_wn.htm
@@ -22,10 +22,11 @@
 	
    
 		
    Content
    
 		
 		
    Related Info
    
 		
      
@@ -41,14 +42,18 @@
 
 
      This feature is supported in wearable applications only.
      
 
-
      The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar. It wraps the elm_scroller internally only to draw a circular scroll bar to the edge of the circular screen. This means you can use elm_scroller callbacks and APIs excluding elm_scroller_policy_set() and elm_scroller_policy_get() APIs.
      
+
      The circle scroller component changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.
      
+
+
      The circle scroller wraps the scroller component (elm_scroller) internally to draw a circular scroller to the edge of the circular screen. This means that you can use the elm_scroller callbacks and functions, excluding the elm_scroller_policy_set() and elm_scroller_policy_get() functions.
      
+
+
      For more information, see the Efl Extension Circle Scroller API.
      
 
-
      Figure: Circle Scroller
       
-
      Circle Scroller
       
+
      Figure: Circle scroller component
       
+
      Circle scroller component
       
 
-
      Creating a Circle Scroller
       
+
      Adding a Circle Scroller Component
       
 
-
      To create a circle scroller, use the eext_circle_object_scroller_add() function. elm_scroller has to be passed by the first parameter of this function.
      
+
      To create a circle scroller component, use the eext_circle_object_scroller_add() function. Pass a elm_scroller component as the first parameter and a circle surface as the second parameter.
      
 
       Evas_Object *scroller;
 Evas_Object *circle_scroller;
@@ -57,22 +62,35 @@ scroller = elm_scroller_add(parent);
 circle_scroller = eext_circle_object_scroller_add(scroller, surface);
 
      
 
+
      The circle scroller component is created with the default style.
      
+
+
      Configuring the Circle Scroller
      
+
+
      You can use the elm_scroller functions to configure a circle scroller, except for the elm_scroller_policy_set() and elm_scroller_policy_get() functions.
      
+
+
      To set the circle scroller policy, use the eext_circle_object_scroller_policy_set() function. The Elm_Scroller_Policy enumerator defines the available scroller policies.
      
+
      The following example sets the horizontal scrollbar on when needed and the vertical scrollbar always off:
      
+
+
      +eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
+
      
+
+
      To get the current scroller policy, use the eext_circle_object_scroller_policy_get() function.
       
+
 
      Activating a Rotary Event
      
 
-
      You can activate and deactivate the circle scroller by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle scroller can receive the rotary event. Otherwise, the circle scroller cannot receive the rotary event.
      
+
      To activate or deactivate the circle scroller, use the eext_rotary_object_event_activated_set() function:
      
 
       eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
 
      
+
      If the second parameter is EINA_TRUE, the circle scroller can receive rotary events.
      
 
-
      Using the Circle Object Property
      
+
      Configuring the Circle Properties
      
 
-
      A circle scroller has the following styles:
      
-
        
-
      • default
        • 
-
      
-
      When created, the circle scroller has default style automatically.
      
+
      To configure the circle properties of the circle scroller:
      
 
-
      Circle scroller objects support the following circle object API calls:
      
+
      • 
+
        You can modify the circle object within the circle scroller component using the following functions:
        
 
          
 	
        • eext_circle_object_line_width_set()
          • 
 	
        • eext_circle_object_line_width_get()
          • 
@@ -82,31 +100,18 @@ eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
 	
        • eext_circle_object_color_get()
          • 
 	
        • eext_circle_object_disabled_set()
          • 
 	
        • eext_circle_object_disabled_get()
          • 
-
        
-
        A circle slider has the following items:
        
+
      
+
    • You can modify the circle scroller item properties with the eext_circle_object_item_XXX() functions.
       
+
      The circle scroller has the following items:
      
 
        
-	
      • default: Default circle item that draws the vertical scroll bar.
        • 
-	
      • vertical,scroll,bg: Vertical scroll background circle item.
        • 
-	
      • horizontal,scroll,bar: Horizontal scroll bar circle item.
        • 
-	
      • horizontal,scroll,bg : Horizontal scroll background circle item.
        • 
-
      
-
      You can change the properties of the items by using the eext_circle_object_item* APIs.
      
-
      For more information, see the Efl Extension Circle Scroller API.
      
+	
    • default: Default circle item that draws the vertical scroller.
      • 
+	
    • vertical,scroll,bg: Vertical scroller background circle item.
      • 
+	
    • horizontal,scroll,bar: Horizontal scroller circle item.
      • 
+	
    • horizontal,scroll,bg : Horizontal scroller background circle item.
      • 
+
    
 
-
    Configuring the Circle Scroller
    
+
    For more information, see Circle Object and the Efl Extension Circle Object API.
    
 
-
    You can use elm_scroller APIs to configure a circle scroller, except elm_scroller_policy_set() and elm_scroller_policy_get() APIs.
    
-
    Instead of excluded APIs, eext_circle_object_scroller_policy_set() and eext_circle_object_scroller_policy_get() functions are provided for the circle scroller.
    
-
    A policy parameter has the following value.
    
-
      
-	
    • ELM_SCROLLER_POLICY_AUTO: indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden.
      • 
-	
    • ELM_SCROLLER_POLICY_ON: Turns the scrollbar on all the time.
      • 
-	
    • ELM_SCROLLER_POLICY_OFF: Turns the scrollbar off. This applies to the horizontal and vertical scrollbars respectively.
      • 
-
    
-
    The following example shows how to set the scroll bar visibility policy to ELM_SCROLLER_POLICY_AUTO for horizontal scroll bar and ELM_SCROLLER_POLICY_OFF for vertical scroll bar.
    
-
    -eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
-
    
 
 
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_slider_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_slider_wn.htm
index eaa78d2..3fa2b60 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_slider_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_slider_wn.htm
@@ -22,11 +22,11 @@
 	
    
 		
    Content
    
 		
 		
    Related Info
    
 		
      
@@ -42,35 +42,67 @@
 
 
      This feature is supported in wearable applications only.
      
 
-
      The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the elm_slider, but also replaces the functionalities of the elm_slider in a circular design.
      
+
      The circle slider component changes corresponding to rotary events. The circle slider not only extends the UI feature of the slider component (elm_slider), but also replaces the functionalities of the elm_slider in the circular design.
      
 
-
      Figure: Circle Slider
       
-
      Circle Slider
       
+
      For more information, see the Efl Extension Circle Slider API.
      
+
+
      Figure: Circle slider component
       
+
      Circle slider component
       
  
-
      Adding an Eext Slider Object
      
+
      Adding a Circle Slider Component
      
 
-
      To create a circle slider, use the eext_circle_object_slider_add() function.
      
+
      To create a circle slider component, use the eext_circle_object_slider_add() function. Pass a circle surface as the second parameter.
      
 
       Evas_Object *circle_slider = NULL;
+
 circle_slider = eext_circle_object_slider_add(parent, surface);
 
      
 
+
      The circle slider component is created with the default style.
      
+
+
      Configuring the Circle Slider
      
+
+
      To configure the circle slider:
      
+
        
+
      • 
+
        Before using the circle slider, set its minimum and maximum values with the eext_circle_object_value_min_max_set() function, and the current value with the eext_circle_object_value_set() function.
        
+
        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:
        
+
        +eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
+eext_circle_object_value_set(circle_slider, 3.0);
+
        
+
        • 
+
      • 
+
        Set the step value with the eext_circle_object_slider_step_set() function.
        
+
        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:
        
+
        +eext_circle_object_slider_step_set(circle_slider, 0.5);
+
        
+
        • 
+
+
      • 
+
        Retrieve the current value of the circle slider with the eext_circle_object_value_get() function:
        
+
        +double value = eext_circle_object_value_get(circle_slider);
+
        
+
        • 
+
      
+
 
      Activating a Rotary Event
      
 
-
      You can activate or deactivate the circle slider by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle slider can receive the rotary event. Otherwise, the circle slider cannot receive the rotary event.
      
+
      To activate or deactivate the circle slider, use the eext_rotary_object_event_activated_set() function:
      
 
       eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);
 
      
 
-
      Using the Circle Slider Property
      
+
      If the second parameter is EINA_TRUE, the circle slider can receive rotary events.
      
 
-
      A circle slider has the following styles:
      
-
        
-	
      • default
        • 
-
      
+
      Configuring the Circle Properties
      
+
+
      To configure the circle properties of the circle slider:
      
 
-
      When created, the circle slider has default style automatically.
      
-
      Circle slider objects support the following circle object API calls:
      
+
      • 
+
        You can modify the circle object within the circle slider component using the following functions:
        
 
          
 	
        • eext_circle_object_value_min_max_set()
          • 
 	
        • eext_circle_object_value_min_max_get()
          • 
@@ -90,48 +122,31 @@ eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);
 	
        • eext_circle_object_color_get()
          • 
 	
        • eext_circle_object_disabled_set()
          • 
 	
        • eext_circle_object_disabled_get()
          • 
-
        
-
        A circle slider has the following items:
        
+
      
+
    • You can modify the circle slider item properties with the eext_circle_object_item_XXX() functions.
       
+
      The circle slider has the following items:
      
 
        
-	
      • default: Default circle item, It draws slider bar.
        • 
+	
      • default: Default circle item, which draws the slider bar.
        • 
 	
      • bg: Background circle item.
        • 
-
      
-
      You can change the properties of the items by using eext_circle_object_item* APIs.
      
-
      For more information, see the Efl Extension Circle Slider API.
      
+
    
 
-
    Configuring the Circle Slider
    
+
    For more information, see Circle Object and the Efl Extension Circle Object API.
    
 
-
    The circle slider step value is used when the rotary event increases or decreases the circle slider value. It can be set with the eext_circle_object_slider_step_set() function.
    
-
    Here, the step value is set to 0.5.
    
-
    -eext_circle_object_slider_step_set(circle_slider, 0.5);
-
    
-
    Before using the circle slider, its minimum and maximum values are set with eext_circle_object_value_min_max_set(). The current value is set with eext_circle_object_value_set().
    
-
    Here, the minimum value is set to 0.0, the maximum value to 15.0, and the current value to 3.0.
    
-
    -eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
-eext_circle_object_value_set(circle_slider, 3.0);
-
    
-
    You can retrieve the current value of the circle slider with the eext_circle_object_value_get() function.
    
-
    -double value = eext_circle_object_value_get(circle_slider);
-
    
+
    Using the Circle Slider Callbacks
    
 
-
    Using Circle Slider Callbacks
    
+
    To receive notifications about the circle slider events, listen to the value,changed signal, which is called when the rotary event changes the circle slider value.
    
+ 
+
    The event_info callback parameter is NULL.
    
+
+
    To register and define a callback for the value,changed signal:
    
 
-
    The circle slider emits the following signal:
    
-
      
-	
    • value,changed: The rotary event changes the circle slider value.
      • 
-
    
-
    For this signal, event_info is NULL.
    
-
    This is how to register a callback on the value,changed signal.
    
 
     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_spinner_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_spinner_wn.htm
index f7d2cf4..0e8193d 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_spinner_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_spinner_wn.htm
@@ -22,10 +22,10 @@
 	
    
 		
    Content
    
 		
 		
    Related Info
    
 		
      
@@ -41,56 +41,84 @@
 
 
      This feature is supported in wearable applications only.
      
  
-
      The circle spinner extends elm_spinner by visualizing the value of elm_spinner. If a rotary event is activated by the eext_rotary_object_event_activated_set() function, the circle spinner increases or decreases the value of elm_spinner through a clockwise or counter-clockwise rotary event.
      
+
      The circle spinner component extends the spinner component (elm_spinner) by visualizing its value. The circle spinner increases or decreases the value of the elm_spinner through a clockwise or counter-clockwise rotary event.
      
 
-
      Figure: Circle Spinner
       
-
      Circle Spinner
       
+
      Figure: Circle spinner component
       
+
      Circle spinner component
       
 
-
      Adding an Eext Spinner Object
      
-
-
      To create a circle spinner:
      
-
      1. Create an elm_spinner object.
        2. 
-
      2. Set the object style as "circle".
        3. 
-
      3. Create an eext_spinner object using the eext_circle_object_spinner_add() function.
      
+
      Adding a Circle Spinner Component
      
 
+
      To create a circle spinner component:
      
+
      1. Create an elm_spinner object:
 
         Evas_Object *spinner, *circle_spinner;
+
 spinner = elm_spinner_add(parent);
+
        2. 
+
      2. Set the object style as circle:
+
         elm_object_style_set(spinner, "circle");
+
        3. 
+
      3. Create an eext_spinner object using the eext_circle_object_spinner_add() function. Pass a circle surface as the second parameter.
+
         circle_spinner = eext_circle_object_spinner_add(spinner, surface);
-
        
-
-
        Activating a Rotary Event
        
+
    
 
-
    You can activate and deactivate the circle spinner by using the eext_rotary_object_event_activated_set() function. If its second parameter is set to EINA_TRUE, the circle spinner can receive rotary events.
    
-
    -eext_rotary_object_event_activated_set(circle_spinner, EINA_TRUE);
-
    
+
    The circle spinner component is created with the default style.
    
 
 
    Configuring the Circle Spinner
    
 
-
    The circle spinner shows the elm_spinner 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.
    
+
    The circle spinner shows the elm_spinner 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.
    
+
+
    To handle the circle spinner value, use the elm_spinner functions. They are automatically synchronized with the user values. You can also use the elm_spinner callback functions.
    
 
-
    To handle the circle spinner value, use the elm_spinner functions. They are synchronized automatically with the user values. You can also use the elm_spinner callback functions.
    
+
    To customize the angle offset of the marker to not to follow the internally-calculated system value:
    
 
-
    If you want to customize the angle offset of the marker (not to follow the internally-calculated system value), use the eext_circle_object_spinner_angle_set() function. For example, to set the circle spinner angle value with 2.0:
    
+
      
+
    1. Set the custom circle spinner angle value using the eext_circle_object_spinner_angle_set() function.
+
      In the following example, the circle spinner angle value is set to 2.0:
      
 
       eext_circle_object_spinner_angle_set(circle_spinner, 2.0);
+
      2. 
+
+
    2. After the eext_circle_object_spinner_angle_set() function has been executed, the calculation formula for the angle offset is changed:
+
+
      +// 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
    
+
+
    You can also use the above function to define the angle offset per each rotary callback.
    
+
+
+
    Activating a Rotary Event
    
+
+
    To activate or deactivate the circle spinner, use the eext_rotary_object_event_activated_set() function:
    
+
    +eext_rotary_object_event_activated_set(circle_spinner, EINA_TRUE);
 
    
 
-
    The formula for calculating the default angle offset of the circle spinner is:
    
-
    (360/ max - min) * step
    
-
    After calling the eext_circle_object_spinner_angle_set() function, the calculation formula for the angle offset is changed:
    
-
    (360/ max - min) * step * 2.0
    
+
    If the second parameter is EINA_TRUE, the circle spinner can receive rotary events.
    
+
+
    Configuring the Circle Properties
    
 
-
    You can also use the same above function to give the angle offset per each rotary callback.
    
+
    To configure the circle properties of the circle spinner:
    
 
-
    Using the Circle Spinner Properties
    
+
    • 
+
      You can modify the circle object within the circle spinner component using the various functions, such as:
      
+
        
+
      • eext_circle_object_value_min_max_set()
        • 
+
      • eext_circle_object_value_min_max_get()
        • 
+
      • eext_circle_object_value_set()
        • 
+
      • eext_circle_object_value_get()
        • 
+
      • 
 
-
      A circle spinner has the default style, which is applied automatically. It also has a default item, which draws a marker.
      
+
    • You can modify the circle spinner default item, which draws the marker.
      
+
      To change the item properties, use the eext_circle_object_item_XXX() functions.
       
    
 
-
    You can set and get various circle spinner properties with circle object functions, such as eext_circle_object_value_min_max_set(), eext_circle_object_value_min_max_get(), eext_circle_object_value_set(), and eext_circle_object_value_get().
    
-  
+
    For more information, see Circle Object and the Efl Extension Circle Object API.
    
 
 
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_surface_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_surface_wn.htm
index ea82de6..722a0b1 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_surface_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_surface_wn.htm
@@ -22,7 +22,7 @@
 	
    
 		
    Content
    
 		
@@ -40,11 +40,16 @@
 
 
    This feature is supported in wearable applications only.
    
 
-
    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.
     
+
    The circle surface component manages and renders circle objects. 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.
     
 
-
    Creating a Circle Surface
    
+
    For more information, see the Efl Extension Circle Surface API.
    
+
+
    Adding a Circle Surface Component
    
 
 
    To create a new circle surface:
    
+
+
      
+
    • Create a circle surface in the conformant layer using the eext_circle_surface_conformant_add() function:
 
       Eext_Circle_Surface *surface;
 Evas_Object *conformant;
@@ -52,8 +57,8 @@ Evas_Object *conformant;
 conformant = elm_conformant_add(parent);
 surface = eext_circle_surface_conformant_add(conformant);
 
      
-
-
      The eext_circle_surface_conformant_add() function creates a circle surface in the conformant layer. If you want to create a circle surface in the layout layer, use the eext_circle_surface_layout_add() function:
      
+
      • 
+
    • Create a circle surface in the layout layer using the eext_circle_surface_layout_add() function:
 
       Eext_Circle_Surface *surface;
 Evas_Object *layout;
@@ -61,8 +66,8 @@ Evas_Object *layout;
 layout = elm_layout_add(parent);
 surface = eext_circle_surface_layout_add(layout); 
 
      
-
-
      If you want to create a circle surface in the naviframe layer, use the eext_circle_surface_naviframe_add() function:
      
+
      • 
+
    • Create a circle surface in the naviframe layer using the eext_circle_surface_naviframe_add() function:
 
       Eext_Circle_Surface *surface;
 Evas_Object *naviframe;
@@ -70,7 +75,8 @@ Evas_Object *naviframe;
 naviframe = elm_naviframe_add(parent);
 surface = eext_circle_surface_naviframe_add(naviframe); 
 
      
-
+
      • 
+
    
  
@@ -84,7 +90,8 @@ surface = eext_circle_surface_naviframe_add(naviframe);
 
 
    Adding Circle Objects to the Circle Surface
    
 
-
    You can add any circle object to a circle surface. The following example shows how to create an eext_slider component and add it to a circle surface in conformant layer:
    
+
    You can add any circle objects to a circle surface.
    
+
    To create a circle slider (eext_slider) component and add it to a circle surface in the conformant layer:
     Eext_Circle_Surface *surface;
 Evas_Object *slider;
@@ -95,7 +102,10 @@ slider = eext_circle_object_slider_add(parent, surface);
 
 
    Deleting the Circle Surface
    
 
-
    Deleting an Evas object automatically deletes the circle surface in the same layer. However, you can explicitly use the eext_circle_surface_del() function to delete a circle surface.
    
+
    Deleting the Evas object (conformant, layout, or naviframe) automatically deletes the circle surface in the same layer.
    
+
+
    You can, however, explicitly use the eext_circle_surface_del() function to delete a circle surface:
    
+
 
     eext_circle_surface_del(surface);
 
    
diff --git a/org.tizen.ui.practices/html/native/efl/component_colorselector_mn.htm b/org.tizen.ui.practices/html/native/efl/component_colorselector_mn.htm
index b0bc1c9..83e242b 100644
--- a/org.tizen.ui.practices/html/native/efl/component_colorselector_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_colorselector_mn.htm
@@ -24,7 +24,7 @@
 		
    Content
    
 		
 			
    Related Info
    
@@ -40,16 +40,9 @@
 
 
    This feature is supported in mobile applications only.
    
 
-
    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.
    
+
    The colorselector component allows the user to select a color.
     
 
-
    Currently only the Palette mode is available in Tizen (other modes are planned for in the future):
    
-
      
-
    • ELM_COLORSELECTOR_PALETTE
-
      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 default identifier.
      
-
      • 
-
    
-
-
    This UI component inherits from the layout component, which means that layout component functions can also be used on the colorselector component.
    
+
    The colorselector component inherits from the layout component, which means that layout component functions can be used on the colorselector component.
    
 
 
    For more information, see the Colorselector API.
    
 
@@ -62,7 +55,7 @@
 
 
    Adding a Colorselector Component
    
 
-
    To create a colorselector object, use the elm_colorselector_add() function:
    
+
    To create a colorselector component, use the elm_colorselector_add() function:
    
 
 
     Evas_Object *colorsel, *parent;
@@ -70,15 +63,22 @@ Evas_Object *colorsel, *parent;
 colorsel = elm_colorselector_add(parent);
 
    
 
-
    Setting the Colorselector Modes
    
+
    Setting the Colorselector Mode
    
+
+
    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).
    
+
+
    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 default palette, which contains 14 colors.
    
+
+
    To use the palette mode:
    
 
-
    To set the mode of the colorselector to the palette mode:
    
+
      
+
    • To set the colorselector mode to palette:
      
 
 
       elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
-
      
+
    
 
-
    The following example shows how to create a new palette called mypalette. This new palette is saved by elementary config and you can load it again later. 3 colors are added in mypalette: red, green, and blue.
    
+
  • To create a new palette called mypalette, with 3 colors (red, green, and blue):
 
 
     elm_colorselector_palette_name_set(colorsel, "mypalette");
@@ -87,37 +87,38 @@ elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
 elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
 
    
 
-
    The default palette already contains 14 colors.
    
-
-
    -elm_colorselector_palette_name_set(colorsel, "default");
-
    
+
    The new palette is saved by the elementary configuration and you can load it again later.
    
+
    • 
 
-
    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.
    
+
  • When a color in the colorselector is clicked, the color set to the colorselector component changes.
+
    To retrieve the currently selected color:
    
 
     int r, g, b, a;
 
 elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
-
    
+
    • Using the Colorselector Callbacks
    
 
-
    You can register callbacks on the following signals:
    
+
    To receive notifications about the colorselector events, listen to the following signals:
      
-
    • changed: The color value changes on the selector. event_info is NULL.
      • 
-
    • color,item,selected: The color item is pressed. The event_info parameter of the callback is the selected color item.
      • 
-
    • color,item,longpressed: The color item is long pressed. The event_info parameter of the callback contains the selected color item.
      • 
+
    • changed: The color value changes on the selector. 
+
      The event_info callback parameter is NULL.
      • 
+
    • color,item,selected: The color item is pressed. 
+
      The event_info callback parameter is the pressed color item.
      • 
+
    • color,item,longpressed: The color item is long-pressed. 
+
      The event_info callback parameter is the long-pressed color item.
      • 
 
    
 
-
    The following example shows how to register a callback on the changed signal.
    
+
    To register and define a callback for the changed signal:
     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_ctxpopup_mn.htm b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_mn.htm
index 7dfb843..1db35e3 100644
--- a/org.tizen.ui.practices/html/native/efl/component_ctxpopup_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_mn.htm
@@ -24,7 +24,7 @@
 		
    Content
    
 		
      
 			
    • Adding a Ctxpopup Component
      • 
-			
    • Modifying the Ctxpopup Style
      • 
+			
    • Using the Ctxpopup Styles
      • 
 			
    • Configuring the Ctxpopup
      • 
 			
    • Managing the Ctxpopup Items
      • 
 			
    • Using the Ctxpopup Callbacks
      • 
@@ -42,7 +42,7 @@
 
 
      This feature is supported in mobile applications only.
      
 
-
      Context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.
      
+
      The context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.
      
 
 
      For more information, see the Ctxpopup API.
      
 
@@ -54,7 +54,7 @@
 
 
      Adding a Ctxpopup Component
      
 
-
      Create the ctxpopup with the elm_ctxpopup_add() 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 elm_ctxpopup_hover_parent_set() function.
      
+
      To create a ctxpopup component, use the elm_ctxpopup_add() function:
      
 
 
       Evas_Object *ctxpopup, *parent;
@@ -63,9 +63,11 @@ Evas_Object *ctxpopup, *parent;
 ctxpopup = elm_ctxpopup_add(parent);
 
      
 
-
      Modifying the Ctxpopup Style
      
+
      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 elm_ctxpopup_hover_parent_set() function.
      
 
-
      The following styles are available:
      
+
      Using the Ctxpopup Styles
      
+
+
      The ctxpopup has the following styles:
      
 
 
        
 
      • default
        • 
@@ -79,7 +81,7 @@ ctxpopup = elm_ctxpopup_add(parent);
     
        Figure: Ctxpopup default (left) and more/default (right) style
         
   
        Ctxpopup default style Ctxpopup more/default style
         
   
-
        To set the more/default style:
        
+
        To set the style to, for example, more/default:
        
 
 
         elm_object_style_set(ctxpopup, "more/default");
@@ -90,19 +92,20 @@ elm_object_style_set(ctxpopup, "more/default");
 
        To configure the ctxpopup:
        
 
          
 
        • 
-
          Set the ctxpopup orientation with the elm_ctxpopup_horizontal_set() function. In the following example, it is set to horizontal.
          
+
          Set the ctxpopup orientation with the elm_ctxpopup_horizontal_set() function.
          
+
          In the following example, the orientation is set to horizontal:
          
 
           elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
 
          
 
          • 
 
        • Disable auto hiding.
-
          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 elm_ctxpopup_auto_hide_disabled_set() function with EINA_TRUE.
          
+
          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 elm_ctxpopup_auto_hide_disabled_set() function with EINA_TRUE:
          
 
           elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 
          
 
          • 
 
        • 
-
          Set the priority of the direction where the ctxpopup appears from:
          
+
          Set the priority of the direction where the ctxpopup appears from with the elm_ctxpopup_direction_priority_set() function:
          
 
 
           elm_ctxpopup_direction_priority_set(ctxpopup, ELM_CTXPOPUP_DIRECTION_UP, ELM_CTXPOPUP_DIRECTION_LEFT,
@@ -119,10 +122,13 @@ elm_ctxpopup_dismiss(ctxpopup);
 
 
          Managing the Ctxpopup Items
          
 
+
          The ctxpopup can contain a small number of items. Each item can have a label, an icon, or both.
           
+
 
          To manage the ctxpopup items:
          
 
            
 
          1. 
-
            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 test label, icon, and the clicked callback (_ctxpopup_item_cb).
            
+
            Add an item with the elm_ctxpopup_item_append() function.
            
+
            To append an item with a test label, icon, and the clicked callback (_ctxpopup_item_cb):
            
 
 
             Elm_Object_Item *it;
@@ -132,28 +138,31 @@ it = elm_ctxpopup_item_append(ctxpopup, "test", icon, _ctxpopup_item_c
 
            
 
            2. 
 
          2. 
-
            Change the item label and icon if the label and icon parameters are not NULL when the item is appended. The following example shows how to change the item label to New label:
            
+
            Change the item label and icon, if the label and icon parameters are not NULL when the item is appended:
            
+
              
+
            • To change the item label to New label:
 
-
              elm_object_item_part_text_set(it, "default", "New label");
+
              +elm_object_item_part_text_set(it, "default", "New label");
 
              
 
              • 
 
            • 
-
              Set its icon to the standard home icon:
              
+
              To set the icon to the standard home icon:
              
 
 
               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);
-
              
+
        
 
 
      • 
-
        The clicked callback is called when the item is clicked:
        
+
        Define a callback that is triggered when the item is clicked:
        
 
         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");
 }
 
        
 
        • 
@@ -161,15 +170,19 @@ _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
 
 
        Using the Ctxpopup Callbacks
        
 
-
        The ctxpopup emits the dismissed signal when it is dismissed. You can register a callback to this signal. The event_info parameter is NULL.
        
+
        To receive notifications about the ctxpopup events, listen to the dismissed signal, which is called when the ctxpopup is dismissed.
        
+ 
+
        The event_info callback parameter is NULL.
        
+
+
        To register and define a callback for the dismissed signal:
        
 
 
         {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_ctxpopup_wn.htm b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_wn.htm
index 01c50bb..b7572e9 100644
--- a/org.tizen.ui.practices/html/native/efl/component_ctxpopup_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_wn.htm
@@ -24,7 +24,7 @@
 		
        Content
        
 		
          
 			
        • Adding a Ctxpopup Component
          • 
-			
        • Modifying the Ctxpopup Style
          • 
+			
        • Using the Ctxpopup Styles
          • 
 			
        • Configuring the Ctxpopup
          • 
 			
        • Managing the Ctxpopup Items
          • 
 			
        • Using the Ctxpopup Callbacks
          • 
@@ -43,18 +43,18 @@
 
 
          This feature is supported in wearable applications only.
          
 
-
          Context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.
          
+
          The context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.
          
 
 
          For more information, see the Ctxpopup API.
          
-    
          Figure: Context popup component
           
-
          Context popup component
           
+    
          Figure: Ctxpopup component
           
+
          Ctxpopup component
           
   
-      
          Figure: Context popup hierarchy
           
-
          Context popup hierarchy
          
+      
          Figure: Ctxpopup hierarchy
           
+  
          Ctxpopup hierarchy
          
 
 
          Adding a Ctxpopup Component
          
 
-
          Create the ctxpopup with the elm_ctxpopup_add() 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 elm_ctxpopup_hover_parent_set() function.
          
+
          To create a ctxpopup component, use the elm_ctxpopup_add() function:
          
 
 
           Evas_Object *ctxpopup, *parent;
@@ -63,35 +63,39 @@ Evas_Object *ctxpopup, *parent;
 ctxpopup = elm_ctxpopup_add(parent);
 
          
 
-
          Modifying the Ctxpopup Style
          
+
          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 elm_ctxpopup_hover_parent_set() function.
          
+
          Using the Ctxpopup Styles
          
 
-
          The following styles are available for the rectangular UI component:
          
+
          The ctxpopup has the following styles for the rectangular screen:
          
 
            
 
          • default
            • 
 
          
-
          The following styles are available for the circular UI component:
          
+
          The ctxpopup has the following styles for the circular screen:
          
 
            
 
          • select_mode
            • 
-
          • select_mode/top, select_mode/bottom (These two styles can be used as a pair.)
            • 
+
          • select_mode/top, select_mode/bottom 
+
            These 2 styles can be used as a pair.
            • 
 
          
 
+
          To set the style to, for example, default:
          
 
-
          To set the default style:
          
 
           elm_object_style_set(ctxpopup, "default");
 
          
 
 
          Configuring the Ctxpopup
          
+
 
          To configure the ctxpopup:
          
 
            
 
          • 
-
            Set the ctxpopup orientation with the elm_ctxpopup_horizontal_set() function. In the following example, it is set to horizontal.
            
+
            Set the ctxpopup orientation with the elm_ctxpopup_horizontal_set() function.
            
+
            In the following example, the orientation is set to horizontal:
            
 
             elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
 
            
 
            • 
 
          • Disable auto hiding.
-
            The auto hide functionality is enabled by default. You can disable auto hiding by calling the elm_ctxpopup_auto_hide_disabled_set() function with EINA_TRUE.
            
+
            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 elm_ctxpopup_auto_hide_disabled_set() function with EINA_TRUE:
            
 
             elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 
            
@@ -100,55 +104,65 @@ elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 
 
            Managing the Ctxpopup Items
            
 
+
            The ctxpopup can contain a small number of items. Each item can have a label, an icon, or both.
             
+
 
            To manage the ctxpopup items:
            
 
              
 
            1. 
-
              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 Test label and no icon.
              
+
              Add an item with the elm_ctxpopup_item_append() function.
              
+
              To append an item with a test label, no icon, and the clicked callback (_ctxpopup_item_cb):
              
 
               Elm_Object_Item *it;
 
-it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb, 
-                  NULL);
-
              
-
              2. 
-
            2. 
-
              The _ctxpopup_item_cb() callback is called when the item is clicked. The following example shows how to write the definition of this callback.
              
-
              -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); 
 
              
 
              3. 
 
            3. 
-
              Set the item label to New label:
              
+
              Change the item label and icon:
              
+
                
+
              • To change the item label to New label:
+
 
                 elm_object_item_part_text_set(it, "default", "New label");
 
                
 
                • 
 
              • 
-
                Set its icon to the standard home icon:
                
+
                To set the icon to the standard home icon:
                
+
 
                 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);
+
              
+
              4. 
+
            4. 
+
              Define a callback that is triggered when the item is clicked:
              
+
              +static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
+}
 
              
 
              5. 
 
            
 
 
            Using the Ctxpopup Callbacks
            
 
-
            The ctxpopup emits the dismissed signal when it is dismissed. You can register a callback to this signal. The event_info parameter is NULL.
            
+
            To receive notifications about the ctxpopup events, listen to the dismissed signal, which is called when the ctxpopup is dismissed.
            
+ 
+
            The event_info callback parameter is NULL.
            
+
+
            To register and define a callback for the dismissed signal:
            
 
 
             {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_custom_n.htm b/org.tizen.ui.practices/html/native/efl/component_custom_n.htm
index 477f0ab..f96a625 100644
--- a/org.tizen.ui.practices/html/native/efl/component_custom_n.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_custom_n.htm
@@ -46,7 +46,7 @@
 
 
            Using Theme Styles
            
 
-
            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.
            
+
            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.
            
 
   
     
  
     
    
 
 
 
 
 
 
     
@@ -54,14 +54,14 @@
       
-      
+     
     
    
    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.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. 
     
     
         
   
     
 
 
    When several styles are loaded in the current theme, you can set a different style to a specific UI component using the elm_object_style_set() function. It is also possible to see the current style with the elm_object_style_get() function.
    
 
-
    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.
    
+
    The default theme specifies several styles for the button component. The following example shows how to set the "anchor" style for a newly created button component.
    
 
 
     Evas_Object *parent, *button;
@@ -69,25 +69,20 @@ 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");
 
    
 
 
    Loading Theme Styles
    
 
-
    Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:
    
-  
      
-   
    • overlays
      • 
-   
    • extensions
      • 
-  
    
-
+
    Once written and compiled with Edje tools, the Elementary provides 2 methods to load the style in the application theme: overlays and extensions.
    
 
    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.
    
+
    To load theme styles:
    
+  
      
+   
    • 
+   
      An overlay can replace the look of all UI components by overriding the default style. If a new style called "default" 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.
      
 
-
      Overlay
      
-
-
      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.
      
-
-
      Here is how to add an overlay to your application's theme.
      
+
      The following example shows how to add an overlay to the application's theme.
      
 
 
       elm_theme_overlay_add(NULL, "./theme_button.edj");
@@ -99,33 +94,22 @@ elm_theme_overlay_add(NULL, "./theme_button.edj");
      Note 
      
      
-     Here we assume that the "theme_button.edj" file only contains a new theme for the button component. 
-     
-    
-   
-
-   
-    
-     
-      
-     
-     
-      
+     
      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.In the example it is assumed that the theme_button.edj file only contains a new theme for the button component.
+	 
      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.
      		 
     
       
           
   
        
 
-
      This is how to remove the previously added overlay to return to the default theme.
      
+
      To remove the previously added overlay and to return to the default theme:
      
 
 
       elm_theme_overlay_del(NULL, "./theme_button.edj");
 
      
+   
      • 
+   
    • 
+   
      With extensions, it is possible to write styles that can be applied to some UI components (not all of them) by using the elm_object_style_set() function.
      
 
-
      Extension
      
-
-
      With extensions, we can write styles that we can apply to some UI components (not all of them) by using the elm_object_style_set() function.
      
-
-
      The application adds a theme to the list of extensions with the following call.
      
+
      The application adds a theme to the list of extensions with the following call:
      
 
 
       elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
@@ -137,13 +121,12 @@ elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
      Note 
      
      
-     Here we assume that the "theme_button_style_custom.edj" file contains a new button style called "custom". 
+     In the example it is assumed that the theme_button_style_custom.edj file contains a new button style called "custom". 
      
     
    
 
-
      This is how to use the new "custom" style on a button component.
      
-
+
      To use the new "custom" style on a button component:
      
 
       Evas_Object *parent, *button;
 
@@ -160,22 +143,24 @@ elm_object_style_set(button, "custom");
      Note 
      
      
-     When using elm_theme_extension_add or elm_theme_overlay_add to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the elm_theme_flush function to flush Elementary theme caches. Thus, the theme of all UI components that use the default theme is reloaded. 
+     When using the elm_theme_extension_add() or elm_theme_overlay_add() functions to add a new theme extension or overlay to a Theme object (the default theme), the Elementary calls the elm_theme_flush() function to flush the Elementary theme caches. This means that the theme of all UI components that use the default theme is reloaded. 
      
     
    
+
      • 
+  
    
 
 
    Creating a New Theme
    
 
-
    This is how to create a new theme object.
    
+
    To create a new theme object:
    
 
 
     Elm_Theme *new_theme = elm_theme_new();
 
    
 
-
    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.
    
+
    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.
    
 
-
    This is how to apply this theme to a UI component and its children (a button, for example).
    
+
    The following example shows how to apply this theme to a button UI component and its children:
    
 
 
     // Create a button component 
@@ -187,16 +172,19 @@ elm_object_theme_set(button, new_theme);
 
 
    Customizing a UI Component Style
    
 
-
    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 Theme.
    
+
    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 Theme.
    
 
-
    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.
    
+
    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.
    
 
 
    Creating a Customized Style for the Check Component
    
 
-
    As an example, we show how to create a new style for the check component. The aim is to update the background and the main pictures of this UI component with custom pictures.
    
-
-
    The EDC source file concerning the check component (check.edc file) is composed of several groups.
    
+
    To create a customized style:
    
+
      
+
    1. 
+
      Create a new style for the check component. The aim is to update the background and the main pictures of this UI component with custom pictures.
      
 
+
      The EDC source file concerning the check component (the check.edc file) is composed of several groups.
      
+
      These 2 groups define 2 different styles for the check component (the "default" style and the "toggle" style).
      
 
       group 
 {
@@ -208,11 +196,9 @@ group
    name: "elm/check/base/toggle";
 }
 
      
-
-
      Those two groups define two different styles for the check component (the "default" style and the "toggle" style).
      
-
-
      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.
      
-
+
      2. 
+
    2. 
+
      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.
      
 
       group 
 {
@@ -220,8 +206,9 @@ group
    // Here is the copy of the content of "default" style 
 }
 
      
-
-
      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.
      
+
      3. 
+
    3. 
+
      In the new group (elm/check/base/custom), find the parts to modify. In this example, the appropriate parts are "bg" and "check".
      
 
 
       part 
@@ -294,14 +281,16 @@ part
 }
 
      
 
-
      We do not detail all the options that can be modified here, but assume that the user is familiar with Edje and knows Edje basics.
      
-
-
      Our custom pictures filenames are:
      
+
      It is assumed that you are familiar with Edje and know Edje basics, and therefore not all options to be modified are detail here.
      
+
      4. 
+
    4. 
+
      Add the custom pictures in the custom style.
      
+
      The custom pictures filenames are:
      
   
        
-   
      • check_base_custom.png for the bg part
        • 
-   
      • check_custom.png for the check part
      
+   
    5. check_base_custom.png for the background part
      6. 
+   
    6. check_custom.png for the check part
      7. 
 
-
      We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.
      
+
      You must update the image.normal attribute in both parts with the custom pictures filenames to modify the pictures of this style.
      
 
 
       part 
@@ -340,23 +329,29 @@ part
      Note 
      
      
-     Here, we assume that the custom images are the same size as the "default" images. 
+     In this example, it is assumed that the custom images are the same size as the "default" images. 
      
     
    
 
+
+
    
+
 
    Adding the Theme File to Your Project
    
 
-
    Once written, the check_custom.edc file is put in the /res/edje/. directory of the application project in the SDK.
    
+
    Once written, the check_custom.edc file is put in the /res/edje/ directory of the application project in the SDK.
    
 
 
    When building the application, the SDK calls the Edje tools automatically to build the final check_custom.edj file. This file can be loaded from our application.
    
 
 
    Using the New Style
    
 
-
    This is how to add the new theme file as an extension in the application.
    
+
    To use the new style:
    
+
      
+
    1. 
+
      Add the new theme file as an extension in the application:
      
 
 
      -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);
@@ -364,8 +359,9 @@ 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);
 
      
-
-
      Use the "custom" style on a new check component.
      
+
      2. 
+
    2. 
+
      Use the "custom" style on a new check component:
      
 
 
       Evas_Object *parent, *check;
@@ -376,14 +372,16 @@ check = elm_check_add(parent);
 // Set its style to "custom" 
 elm_object_style_set(check, "custom");
 
      
+
      3. 
+
    
 
 
    Special Theme Parts
    
 
-
    Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type TEXT are modified using the elm_object_part_set_text() function. The content of SWALLOW parts is updated using the elm_object_part_content_set() function.
    
+
    Some parts of the EDC file can be interacted with the Elementary. The content of parts of the TEXT type are modified using the elm_object_part_set_text() function. The content of SWALLOW parts is updated using the elm_object_part_content_set() function.
    
 
 
    Swallow Parts
    
 
-
    In the previous example (the check component "default" style), there is a part called "elm.swallow.content" that is of the type SWALLOW.
    
+
    In the previous example (the check component "default" style), there is a part called "elm.swallow.content" that is of the SWALLOW type.
    
 
 
     part 
@@ -431,7 +429,7 @@ part
 }
 
    
 
-
    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.
    
+
    You 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.
    
 
 
     Evas_Object *parent, *check1, *content;
@@ -449,14 +447,14 @@ elm_object_part_content_set(check1, "elm.swallow.content", content);
      Note 
      
      
-     We can add new SWALLOW 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 SWALLOW parts changes the UI component's behavior. 
+     You can add new SWALLOW 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 SWALLOW parts changes the UI component's behavior. 
      
     
    
 
 
    Text Parts
    
 
-
    The same is done with parts of the type TEXT. The check "default" style contains a part named "elm.text".
    
+
    The same is done with parts of the type TEXT. The check "default" style contains a part named "elm.text".
    
 
 
     part 
@@ -486,7 +484,7 @@ part
    description
    {
       state: "visible" 0.0;
-      inherit: "default" 0.0;
+      inherit: "default" 0.0;
       visible: 1;
       text.min: 1 1;
    }
@@ -509,7 +507,7 @@ part
 }
 
    
 
-
    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.
    
+
    The following example shows 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.
    
 
 
     Evas_Object *parent, *check2;
diff --git a/org.tizen.ui.practices/html/native/efl/component_datetime_mn.htm b/org.tizen.ui.practices/html/native/efl/component_datetime_mn.htm
index 2af1242..5283fb8 100644
--- a/org.tizen.ui.practices/html/native/efl/component_datetime_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_datetime_mn.htm
@@ -27,7 +27,6 @@
 			
  • Using the Datetime Styles
    • 
 			
  • Setting the Datetime Format
    • 
 			
  • Using the Datetime Callbacks
    • 
-			
  • UX Issue Since Tizen 2.3
    • 
 		
 			
    Related Info
    
 		
      
@@ -42,19 +41,31 @@
 
 
      This feature is supported in mobile applications only.
      
 
-
      The datetime component displays and adds date and time values.
      
+
      The datetime component displays date and time values.
      
 
 
      For more information, see the Datetime API.
      
 
-
      Figure: Datetime selection
       
-
       Datetime selection 
       
+
      Figure: Datetime component
       
+
       Datetime component 
       
  
 
      Figure: Datetime hierarchy
       
 
       Datetime hierarchy 
       
 
 
      Adding a Datetime Component
      
 
-
      Create the datetime component with the elm_datetime_add() function. It is possible to select the visible fields with the elm_datetime_field_visible_set() function. The following fields can be controlled:
      
+
      To create a datetime component:
      
+
+
        
+
      1. Add the datetime component with the elm_datetime_add() function:
+
        +Evas_Object *datetime, *parent;
+
+datetime = elm_datetime_add(parent);
+
        2. 
+
+
      2. Select the visible fields with the elm_datetime_field_visible_set() function.
+
+
        The visibility of the following fields can be controlled:
        
   
          
    
        • ELM_DATETIME_YEAR: Year field
          • 
    
        • ELM_DATETIME_MONTH: Month field
          • 
@@ -64,13 +75,9 @@
    
        • ELM_DATETIME_AMPM: AM/PM field
          • 
   
        
 
-
        The following example shows how to create a datetime component and set the HOUR and MINUTE fields visible.
        
+
        To set the HOUR and MINUTE fields visible:
        
 
 
        -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);
 
@@ -78,62 +85,81 @@ elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
 elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
 elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
 elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
-
        
+
    
+
 
 
    Using the Datetime Styles
    
 
-
    The following styles are available:
    
+
    The datetime has the following styles:
    
   
      
    
    • date_layout
      • 
    
    • time_layout
      • 
    
    • time_layout_24hr
      • 
   
    
 
-
    To set the date_layout style to the datetime component:
    
+
    To set the style to, for example, date_layout:
    
 
 
     elm_object_style_set(datetime, "date_layout");
 
    
 
+   
+    
+     
+      
+     
+     
+      
+     
+    
+  
    Note
    Pay attention to the following UX issue since Tizen 2.3:
+
+
    The elm_datetime 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:
    
+
+
      
+  
    • date_layout (default): Year, month, day
      • 
+  
    • time_layout: Hour, minute, AM/PM button
      • 
+  
    • time_layout_24hr: Hour, minute
      • 
+
    
+
+
    If you call the elm_datetime_field_visible_set() function for a field that is not supported in the current style, the function does not work.
      
+
 
    Setting the Datetime Format
    
 
-
    The format of the date and time can be configured with the elm_datetime_format_set() function using a combination of allowed Libc date format specifiers. In the following example, the format is set to DD MM YY.
    
+
    The date and time format can be configured with the elm_datetime_format_set() function using a combination of allowed Libc date format specifiers.
    
+
    To set the format to "DD MM YY":
    
 
 
     elm_datetime_format_set(datetime, "%d%B%Y");
 
    
 
-
    For a complete list available options, see the Datetime API.
    
+
    For a complete list of available specifiers, see the Datetime API.
    
 
 
    Using the Datetime Callbacks
    
 
-
    A callback can be registered on the changed signal to detect when the datetime field values are changed. The event_info parameter is NULL.
    
+
    To receive notifications about the datetime events, listen to the following signals:
    
+
      
+
    • changed: The datetime field values are changed.
      • 
+
    • language,changed: The system locale changes.
      • 
+
     
+ 
+
    In both these signals, the event_info callback parameter is NULL.
    
+
+
    To register and define a callback for the changed signal:
    
 
 
     {
    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");
 }
    
 
-
    The language,changed signal is emitted when the system locale changes.
    
- 
-
-
    UX Issue Since Tizen 2.3
    
-
-
      
-  
    • date_layout (default): Year, month, day
      • 
-  
    • time_layout: Hour, minute, AM/PM button
      • 
-  
    • time_layout_24hr: Hour, minute
      • 
-
    
- 
-
    The elm_datetime 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 elm_datetime_field_visible_set() function for a field that is not supported in the style, it does not work.
    
  
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_datetime_wn.htm b/org.tizen.ui.practices/html/native/efl/component_datetime_wn.htm
index 1b4b44b..69b5844 100644
--- a/org.tizen.ui.practices/html/native/efl/component_datetime_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_datetime_wn.htm
@@ -42,19 +42,25 @@
 
 
    This feature is supported in wearable applications only.
    
 
-
    The datetime component displays and adds date and time values.
    
+
    The datetime component displays date and time values.
    For more information, see the Datetime API.
    
 
-
    Figure: Datetime selection
     
-
    Datetime selection 
     
+
    Figure: Datetime component
     
+
    Datetime component 
    Figure: Datetime hierarchy
     
-
    Datetime hierarchy 
     
+
     Datetime hierarchy 
    Adding a Datetime Component
    
 
-
    Create the datetime component with the elm_datetime_add() function. The following fields can be controlled:
    
+
    To create a datetime component:
    
+
      
+
    1. Add the datetime component with the elm_datetime_add() function.
+
      2. 
+
    2. Select the visible fields with the elm_datetime_field_visible_set() function.
+
+
      The visibility of the following fields can be controlled:
      
   
        
    
      • ELM_DATETIME_YEAR: Year field
        • 
    
      • ELM_DATETIME_MONTH: Month field
        • 
@@ -64,48 +70,59 @@
    
      • ELM_DATETIME_AMPM: AM/PM field
        • 
   
      
 
+
      3. 
+
    Using the Datetime Styles
    
 
-
    The following styles are available:
    
+
    The datetime has the following styles:
      
    
    • datepicker_layout
      • 
    
    • timepicker_layout
      • 
   
    
 
-
    To set the datepicker_layout style to the datetime component:
    
+
    To set the style to, for example, datepicker_layout:
     elm_object_style_set(datetime, "datepicker_layout");
 
    Setting the Datetime Format
    
 
-
    The format of the date and time can be configured with the elm_datetime_format_set() function using a combination of allowed Libc date format specifiers. In the following example, the format is set to HH : MM.
    
+
    The date and time format can be configured with the elm_datetime_format_set() function using a combination of allowed Libc date format specifiers.
    
+
    To set the format to "HH : MM":
    
+
 
     elm_object_style_set(datetime, "timepicker_layout");
 elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M");
 
    
 
-
    For a complete list available options, see the Datetime API.
    
+
    For a complete list of available specifiers, see the Datetime API.
    Using the Datetime Callbacks
    
 
-
    A callback can be registered on the changed signal to detect when the datetime field values are changed. The event_info parameter is NULL.
    
+
    To receive notifications about the datetime events, listen to the following signals:
    
+
      
+
    • changed: The datetime field values are changed.
      • 
+
    • language,changed: The system locale changes.
      • 
+
     
+ 
+
    In both these signals, the event_info callback parameter is NULL.
    
+
+
    To register and define a callback for the changed signal:
     {
    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");
 }
    
 
-
    The language,changed signal is emitted when the system locale changes.
    
-
+ 
 
    
     
 
  
  
  
 
 
 
   
 
 
 
 
 
 
 
    
diff --git a/org.tizen.ui.practices/html/native/efl/component_entry_mn.htm b/org.tizen.ui.practices/html/native/efl/component_entry_mn.htm
index 6611750..9e5878e 100644
--- a/org.tizen.ui.practices/html/native/efl/component_entry_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_entry_mn.htm
@@ -24,19 +24,11 @@
 		
    Content
    Related Info
      
@@ -53,13 +45,15 @@
 
 
      The entry component is a box where the user can enter text. It supports the following features:
      
   
        
+   
      • Multiline
        • 
+   
      • Scrolling
        • 
    
      • Password mode
        • 
    
      • Filtering text
        • 
    
      • Read/write from a file
        • 
    
      • Theme style overrides
        • 
   
      
    
-
      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.
      
+
      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.
      
 
 
      For more information, see the Entry API.
      
    
@@ -71,7 +65,8 @@
    
 
      Adding an Entry Component
      
 
-
      Create the entry component with the elm_entry_add() function, and set the text inside it with the elm_entry_entry_set() function:
      
+
      To create an entry component, use the elm_entry_add() function. You can set the text inside it with the elm_entry_entry_set() function.
      
+
 
       Evas_Object *entry, *parent;
 
@@ -79,12 +74,14 @@ entry = elm_entry_add(parent);
 elm_entry_entry_set(entry, "A short text.");
 
      
 
-
      Using the Text Editor
      
+
      Managing the Text
      
 
-
      To use the text editor:
      
+
      To manage the entry component content:
      
 
        
 
      • 
-
        Append text to the end of existing content:
        
+Add text to the entry:
+
+
        • Append text to the end of the existing content:
 
 
           elm_entry_entry_append(entry, "END");
@@ -92,130 +89,111 @@ elm_entry_entry_append(entry, "END");
 
          • 
 
        • 
 
          Insert text at the current cursor position:
          
-
 
           elm_entry_entry_insert(entry, "CURSOR");
-Eina_Bool Empty = elm_entry_is_empty(entry);
 
          
-
-
          Call the elm_entry_is_empty() function to see whether the entry is empty. Here, the boolean variable Empty returns EINA_FALSE.
          
-
          • 
+
        • 
 
      • 
-
        Make the entry uneditable by the user. By default, the user can enter text in the entry component when it is in focus.
        
-
-
        -elm_entry_editable_set(entry, EINA_FALSE);
-
        
-
-  
    
     
         
    
 		
 			
 		
     
-    
-     
-      
-     
-     
-      
-     
-    
-  
    Note
    It is still possible to use the previous functions to modify the text of a non-editable entry.
      
- 
- 
- 
-
    Setting the Password Mode
    
-
-
    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).
    
-
+
    Check whether the entry is empty:
    
 
    -elm_entry_password_set(entry, EINA_TRUE);
+Eina_Bool Empty = elm_entry_is_empty(entry);
 
    
-
-
    When the password mode is enabled, the elm_object_text_get() function returns an utf8 string for user convenience.
    
-
-
    Entry Line Modes and Wrapping
    
-
-
    The entry component has 2 line modes:
    
-  
      
-   
    • Single line mode
      • 
-   
    • Multiline mode
      • 
-  
    
-
-
    To use entry line modes:
    
+
    If the entry has content, the function returns the  Boolean EINA_FALSE variable.
    
+
+
  • Select text:
 
      
-
    • 
-
      Set the entry to the single line mode:
      
+
    • Select all the content of the entry component:
 
      -elm_entry_single_line_set(entry, EINA_TRUE);
+elm_entry_select_all(entry);
 
      
-
-
      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 activate event instead of adding a new line.
      
 
      • 
-
    • 
-
      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:
      
+
    • Select a part of the text with the elm_entry_select_region_set() function. 
      The following example selects the first 20 characters of the entry content:
      
 
      -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);
 
      
-
-
      In multiline entries, the elm_entry_line_wrap_set() 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:
      
-  
        
-   
      • ELM_WRAP_NONE: No wrap
        • 
-   
      • ELM_WRAP_CHAR: Wrap between characters
        • 
-   
      • ELM_WRAP_WORD: Wrap in allowed wrapping points (as defined in the unicode standard)
        • 
-   
      • ELM_WRAP_MIXED: Word wrap, and if that fails, char wrap
        • 
-  
      
 
      • 
-
    
-
    Selecting Text
    
-
-
    To select text:
    
-
      
-
    • Select all the content of the entry component:
+
    • Clear the current selection:
 
      -elm_entry_select_all(entry);
+elm_entry_select_none(entry);
 
      
 
      • 
-
-
    • Deselect the current selection:
+
    • 
+
  • Retrieve the currently selected text:
 
    -elm_entry_select_none(entry);
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
 
    
+
    If the entry text is empty, the function returns NULL.
    
 
    • 
-
-
  • Select part of the text with the elm_entry_select_region_set() function. The following code selects the first 20 characters of the entry content.
+
  • 
+
    Copy or cut the selection to the clipboard:
    
 
    -elm_entry_select_region_set(entry, 0, 20);
+elm_entry_selection_cut(entry);
+
    
+
    Paste the selection in the same or a different entry:
    
+
    +elm_entry_selection_paste(entry);
 
    
 
    • 
+
  • Filter the text.
+
    You can filter the size and individual characters within the entry text by appending a filter with the elm_entry_markup_filter_append() function.
    
+
      
+
    • To limit the size of the entry to 8 characters:
+
      +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);
+
      • 
 
-
    • Retrieve the currently selected text in an entry:
+
    • To define a list of accepted or rejected characters, append the filter with the Elm_Entry_Filter_Accept_Set structure.
+
      The following example shows how to reject the '+', '-', '*', and '/' characters:
      
 
      -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);
 
      
+
    
 
    • 
 
 
-
    If the entry text is empty, the elm_entry_selection_get() function returns NULL.
    
+
    You can define a file (for example, /tmp/test.txt) 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.
    
 
-
    To manage the selection:
    
-
      
-
    1. 
-
      Copy or cut the selection to the clipboard.
      
 
      -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);
 
      
-
      2. 
-
    2. 
-
      Paste the selection in the same or a different entry.
      
+
+
      You can also deactivate the automatic saving feature and explicitly save the content when needed:
      
+
 
      -elm_entry_selection_paste(entry);
+// Disable autosaving 
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed 
+elm_entry_file_save(entry);
 
      
-
      3. 
-
    
 
-
    Controlling the Cursor
    
+
    Managing the Cursor
    
+
+
    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 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.
    
+
    To manage the cursor position:
    
 
      
 
    • Move the cursor to the beginning of the entry:
 
      @@ -235,21 +213,21 @@ elm_entry_cursor_down(entry);
 elm_entry_cursor_up(entry);
 
      
 
      • 
-
    • Move the cursor 1 character to the left or right:
+
    • Move the cursor 1 character left or right:
 
       elm_entry_cursor_prev(entry);
 elm_entry_cursor_next(entry);
 
      
 
      • 
 
-
    • Set the cursor at a specific position (15th character, for example):
+
    • Set the cursor at a specific position (15th character, for example):
 
       elm_entry_cursor_pos_set(entry, 15);
 
      
 
      • 
-
    
 
-
    The following example shows how to start a selection at the current cursor position, move 5 characters to the right and end the selection.
    
+
  • Make a text selection while moving the cursor. 
+
    The following example starts a selection at the current cursor position, moves 5 characters right, and ends the selection:
    
 
 
     elm_entry_cursor_selection_begin(entry);
@@ -260,34 +238,88 @@ for (i = 0; i < 5; i++)
 }
 
 elm_entry_cursor_selection_end(entry);
+
    • 
+ 
+
    Configuring the Entry
    
+
+
    To configure the entry functionality:
    
+
+
      
+
    • 
+
      Make the entry uneditable by the user.
      
+
      By default, the user can enter text in the entry component when it is in focus.
      
+
+
      +elm_entry_editable_set(entry, EINA_FALSE);
 
      
 
-
      Formatting Text
      
+   
+    
+     
+      
+     
+     
+      
+     
+    
+  
      Note
      Even when the entry component is set to be uneditable by the user, you can still use the elm_entry_entry_append() and elm_entry_entry_insert() functions to modify its text programmatically.
        
+ 
      • 
+
    • 
+
      Set the password mode.
      
+
      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).
      
+
+
      +elm_entry_password_set(entry, EINA_TRUE);
+
      
 
-
      Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available:
      
+
      When the password mode is enabled, the elm_object_text_get() function returns an UTF-8 string for user convenience.
      • 
+
    • 
+
      Define the line mode and wrapping.
      
+
      The entry component has 2 line modes: single and multiline:
      
+
        
+
      • 
+
        To set the entry to the single line mode:
        
+
        +elm_entry_single_line_set(entry, EINA_TRUE);
+
        
+
        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 activate event instead of adding a new line.
        
+
        • 
+
      • 
+
        To set the entry to the multiline mode with wrapping:
        
+
        +elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+
        
+
        In this mode, the text wraps at the end of the entry and pressing the Enter key creates a new line.
        
+
        In multiline entries, the elm_entry_line_wrap_set() 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:
        
   
          
-   
        • <br>: Inserts a line break.
          • 
-   
        • <ps>: Inserts a paragraph separator. This is preferred over line breaks.
          • 
-   
        • <tab>: Inserts a tab.
          • 
-   
        • <em>...</em>: Emphasis. Sets the oblique style for the enclosed text.
          • 
-   
        • <b>...</b>: Sets the bold style for the enclosed text.
          • 
-   
        • <link>...</link>: Underlines the enclosed text.
          • 
-   
        • <hilight>...</hilight>: Highlights the enclosed text.
          • 
+   
        • ELM_WRAP_NONE: No wrap
          • 
+   
        • ELM_WRAP_CHAR: Wrap between characters
          • 
+   
        • ELM_WRAP_WORD: Wrap in allowed wrapping points (as defined in the unicode standard)
          • 
+   
        • ELM_WRAP_MIXED: Word wrap, and if that fails, character wrap
          • 
   
        
+
        • 
+
      • 
+
    
 
-
    Using Special Markups
    
 
-
    Special markups can be added within the text of the entry:
    
-  
      
-   
    • <a href = ..>...</a>: Anchors
      • 
-   
    • <item size = .. vsize = .. href = ..>...</item>: Items
      • 
-  
    
 
-
    The anchors generate an anchor,clicked signal when the user clicks on them. The href attribute is used to identify the anchor. It also reacts to the anchor,in (mouse in), anchor,out (mouse out), anchor,down (mouse down), and anchor,up (mouse up) events.
    
+
    Modifying Formatting and Using Special Markups
    
 
-
    The item markup provides a way to insert any Evas_Object in the text. The Evas_Object name has to be specified in the href attribute.
    
+
    You can format the entry text in many ways:
    
 
-
    The elm_entry_item_provider_append() 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 elm_entry_item_provider_prepend() function. The elm_entry_item_provider_remove() function removes a custom item provider from the list.
    
+
      
+
    • Format the entry text with markup elements that are defined in the theme.
+
       For example, you can use the <br> element to insert a line break. For a list of available markup elements, see Formatted text.
      
+
      • 
+
+
    • Add special markups within the entry text:
+  
        
+   
      • Anchors: <a href = ..>...</a>
+   
        The anchors generate an anchor,clicked signal when the user clicks them. The href attribute is used to identify the anchor. The anchor also reacts to the anchor,in (mouse in), anchor,out (mouse out), anchor,down (mouse down), and anchor,up (mouse up) events.
        • 
+   
      • Items: <item size = .. vsize = .. href = ..>...</item>
+   
        The items provide a way to insert any Evas_Object in the text. The Evas_Object name must be specified in the href attribute.
        
+   
        The elm_entry_item_provider_append() 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 elm_entry_item_provider_prepend() function. The elm_entry_item_provider_remove() function removes a custom item provider from the list.
        
 
 
         static Evas_Object 
@@ -312,11 +344,11 @@ Entry = elm_entry_add(layout);
 elm_object_text_set(entry, "Item Provider"
                     "<item size=50x50 vsize=full href=itemprovider></item>");
 elm_entry_item_provider_append(entry, item_provider, NULL);
-
        
-
-
        Overriding Style
        
-
-
        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 elm_entry_text_style_user_push() 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 elm_entry_text_style_user_pop() function.
        
+
    
+  
+
+
  • Override the textblock object style.
+
    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 elm_entry_text_style_user_push() 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 elm_entry_text_style_user_pop() function.
    
 
 
     Evas_Object *entry;
@@ -329,131 +361,82 @@ elm_entry_text_style_user_push(entry, "DEFAULT='font=Tizen:style=Light
 
 
    Figure: Overriding style
     
 
     Overriding style 
     
-
-
    Filtering Text
    
-
-
    Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.
    
-
    -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);
-
    
-
-
    The content can be filtered by passing an Elm_Entry_Filter_Accept_Set structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the '+', '-', '*', and '/' characters.
    
-
    -static Elm_Entry_Filter_Accept_Set 
-accept_set = 
-{
-   .accepted = NULL,
-   .rejected = "+*-/"
-};
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
-
    
-
-
    Loading and Saving Files
    
-
-
    The entry content can be saved to a file (/tmp/test.txt, for example).
    
-
-
    -// 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);
-
    
-
-
    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.
    
-
-
    -// Disable autosaving 
-elm_entry_autosave_set(entry, EINA_FALSE);
-
-// Trigger saving when needed 
-elm_entry_file_save(entry);
-
    
-
-
    Using Entry Theme Content
    
-
-
    2 content parts of the default theme are available: icon and end. The following example shows how to set an icon in the end content part.
    
+
    • 
+
  • Modify the content and text parts of the default theme:
+
      
+
    • You can modify 2 content parts of the default theme: icon and end.
+
      The following example shows how to set an icon in the end content part:
      
 
       Evas_Object *icon;
 
 ic = elm_icon_add(entry);
 elm_image_file_set(ic, "icon.png", NULL);
 elm_object_part_content_set(entry, "end", icon);
-
      
-
-
      Using Entry Theme Texts
      
-
-
      The default theme allows the use of the following text parts:
      
-  
        
-   
      • default: Text of the entry
        • 
-   
      • guide: Placeholder of the entry
        • 
-  
      
-
-
      The following example shows how to set the placeholder text of the entry to Hello World.
      
+
    • 
+
  • You can modify 2 text parts of the default theme: default (entry text) and guide (entry placeholder).
+
    The following example shows how to set the placeholder text to Hello World:
    
 
 
    -elm_object_part_text_set(entry, "Hello World");
-
    
+elm_object_part_text_set(entry, "guide", "Hello World");
+
    • -

    Using Entry Callbacks

    +

    Using the Entry Callbacks

    -

    The entry component emits the following signals:

    +

    To receive notifications about the entry events, listen to the following signals:

    -

    For signals, where event_info has not been explicitly described, it is set to NULL.

    +

    If not mentioned separately, the event_info callback parameter in all signals is NULL.

    -

    The following example shows how to register a callback to the focused signal.

    +

    To register and define a callback for the focused signal:

     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm b/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm
index 7ce955b..0bd2597 100644
--- a/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm
@@ -24,19 +24,11 @@
 		
    Content
    
 		
 			
    Related Info
    
 		
 
-
    If the entry text is empty, the elm_entry_selection_get() function returns NULL.
    
+
    You can define a file (for example, /tmp/test.txt) 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.
    
 
-
    To manage the selection:
    
-
      
-
    1. 
-
      Copy or cut the selection to the clipboard.
      
 
      -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);
 
      
-
      2. 
-
    2. 
-
      Paste the selection in the same or a different entry.
      
+
+
      You can also deactivate the automatic saving feature and explicitly save the content when needed:
      
+
 
      -elm_entry_selection_paste(entry);
+// Disable autosaving 
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed 
+elm_entry_file_save(entry);
 
      
-
      3. 
-
    
 
-
    Controlling the Cursor
    
+
    Managing the Cursor
    
+
+
    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 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.
    
+
    To manage the cursor position:
    
 
 
-
    The following example shows how to start a selection at the current cursor position, move 5 characters to the right and end the selection.
    
+
  • Make a text selection while moving the cursor. 
+
    The following example starts a selection at the current cursor position, moves 5 characters right, and ends the selection:
    
+
 
     elm_entry_cursor_selection_begin(entry);
 
@@ -263,167 +241,174 @@ for (i = 0; i < 5; i++)
 }
 
 elm_entry_cursor_selection_end(entry);
-
    
-
-
    Formatting Text
    
-
-
    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:
    
-  
      
-   
    • <br>: Inserts a line break.
      • 
-   
    • <ps>: Inserts a paragraph separator. This is preferred over line breaks.
      • 
-   
    • <tab>: Inserts a tab.
      • 
-   
    • <em>...</em>: Emphasis. Sets the oblique style for the enclosed text.
      • 
-   
    • <b>...</b>: Sets the bold style for the enclosed text.
      • 
-   
    • <link>...</link>: Underlines the enclosed text.
      • 
-   
    • <hilight>...</hilight>: Highlights the enclosed text.
      • 
-  
    
-
-
    Using Special Markups
    
-
-
    Special markups can be added within the text of the entry:
    
-  
      
-   
    • <a href = ..>...</a>: Anchors
      • 
-   
    • <item size = .. vsize = .. href = ..>...</item>: Items
      • 
-  
    
-
-
    The anchors generate an anchor,clicked signal when the user clicks on them. The href attribute is used to identify the anchor. It also reacts to the anchor,in (mouse in), anchor,out (mouse out), anchor,down (mouse down), and anchor,up (mouse up) events.
    
+
    • + +

    Configuring the Entry

    -

    The item markup provides a way to insert any Evas_Object in the text. The Evas_Object name has to be specified in the href attribute.

    +

    To configure the entry functionality:

    -

    Overriding Style

    + -

    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.

    -
    -// Disable autosaving 
-elm_entry_autosave_set(entry, EINA_FALSE);
 
-// Trigger saving when needed 
-elm_entry_file_save(entry);
-
    +

    Modifying Formatting and Using Special Markups

    -

    Using Entry Theme Content

    +

    You can format the entry text in many ways:

    -

    2 content parts of the default theme are available: icon and end. The following example shows how to set an icon in the end content part.

    + -

    Using Entry Callbacks

    +

    Using the Entry Callbacks

    -

    The entry component emits the following signals:

    +

    To receive notifications about the entry events, listen to the following signals:

    -

    For signals, where event_info has not been explicitly described, it is set to NULL.

    +

    If not mentioned separately, the event_info callback parameter in all signals is NULL.

    -

    The following example shows how to register a callback to the focused signal.

    +

    To register and define a callback for the focused signal:

     {
    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");
 } 
-
    - + + diff --git a/org.tizen.ui.practices/html/native/efl/component_flip_mn.htm b/org.tizen.ui.practices/html/native/efl/component_flip_mn.htm index 1992374..9ff4e98 100644 --- a/org.tizen.ui.practices/html/native/efl/component_flip_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_flip_mn.htm @@ -24,8 +24,8 @@

    Content

    Related Info

    @@ -41,7 +41,7 @@

    This feature is supported in mobile applications only.

    -

    The flip component can hold two Evas_Objects and allows the user flip between them using several pre-defined animations.

    +

    The flip component can hold 2 Evas_Objects and allows the user to flip between them using several predefined animations.

    For more information, see the Flip API.

    @@ -50,63 +50,50 @@

    Adding a Flip Component

    -

    To create a flip component, use the elm_flip_add() function:

    +

    To create a flip component:

    + +
    1. Add a flip component using the elm_flip_add() function: 
       Evas_Object *flip, *parent, *content1, *content2;
+
 flip = elm_flip_add(parent);
-
      +
      2. -

      You can add content to the flip component. content1 is set to the front content and content2 is set to the back mode.

      +
    2. Add content to the flip component using the elm_object_part_content_set() function. +

      Use the front and back part names to define the 2 Evas_Objects used as content:

       elm_object_part_content_set(flip, "front", content1);
 elm_object_part_content_set(flip, "back", content2);
-
      +
    -

    Configuring Flip Animation

    +

    Configuring the Flip Animation

    -

    Run an flip animation:

    +

    To run a flip animation, use the elm_flip_go() function:

     elm_flip_go(flip, ELM_FLIP_CUBE_UP);
    -

    This animation flips up the front content object as if it was on a side of a cube, letting the down facing side of the cube appear with the back content object. The following animations are available:

    - - -

    Interacting With the User

    - -

    To interact with the user:

    +

    The ELM_FLIP_CUBE_UP animation mode flips up the front content object as if it was on a side of a cube, letting the down facing side of the cube appear with the back content object. For a complete list of animation modes, see elm_flip_go() Remarks.

    + +

    Interacting with the User

    + +

    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.

    + +

    To set interaction settings to enable the user to interact with the flip:

    Using the Flip Callbacks

    -

    Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, the event_info parameter is NULL.

    +

    To receive notifications about the flip events, listen to the following signals:

    + -

    To register a callback on the "animation,begin" signal:

    +

    In both these signals, the event_info callback parameter is NULL.

    + +

    To register and define a callback for the animate,begin signal:

     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_flipselector_mn.htm b/org.tizen.ui.practices/html/native/efl/component_flipselector_mn.htm
index 292cacb..9478e20 100644
--- a/org.tizen.ui.practices/html/native/efl/component_flipselector_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_flipselector_mn.htm
@@ -25,8 +25,8 @@
 		
 			
    Related Info
    
@@ -58,36 +58,47 @@
 
 
     Evas_Object *flipselector, *parent;
+
 flipselector = elm_flipselector_add(parent);
 
    
 
 
    Configuring the Flipselector
    
 
-
    Use the elm_flipselector_first_interval_set() 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.
    
+
    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.
    
+
+
    To set the first interval, use the elm_flipselector_first_interval_set() function:
    
 
     elm_flipselector_first_interval_set(flipselector, 2.0);
 
    
 
-
    Adding Items
     
+
    Adding Flipselector Items
    
 
-
    The following example shows how to add an item object with the number "99". By passing the it_select_cb() smart callback as a parameter, the callback is called when the item is selected.
    
+
    To add flipselector items:
    
+
      
+
    1. 
+
      Add a flipselector item with the number "99", calling the it_select_cb() smart callback when this item is selected:
      
 
       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);
+
      
+
      The elm_flipselector_item_append() function appends the items to the existing ones. It is also possible to prepend flipselector items with the elm_flipselector_item_prepend() function.
      
+
      2. 
+
    2. 
+
      Define the smart callback:
      
+
      +// 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");
 }
 
      
+
      3. 
+
    
 
-
    An item can be prepended with the elm_flipselector_item_prepend() function.
    
-
-
-
    Changing the Values
    
-
    To change the values:
    
+
    Changing the Flipselector Value
    
+
    To change the value:
  • -

    Show the text of the specific item using the elm_flipselector_item_selected_set() function. When this function sets EINA_FALSE to the selected item, the flipselector shows the text of the first item.

    +

    Show the text of the specific item using the elm_flipselector_item_selected_set() function.

    +

    If the second parameter is set to EINA_FALSE, the flipselector shows the text of the first item.

     elm_flipselector_item_selected_set(flip_it, EINA_TRUE);
    @@ -111,14 +123,21 @@ elm_flipselector_item_selected_set(flip_it, EINA_TRUE);

    Using the Flipselector Callbacks

    -

    The flipselector component emits the following signals:

    +

    To receive notifications about the flipseletor events, listen to the following signals:

    -

    When the user selects an item in the flipselector, the selected signal is emitted. The following example shows how to implement a callback function for this signal.

    + +

    To register and define a callback for the selected signal:

    +{
+   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)
 {
@@ -127,10 +146,6 @@ _flip_selected_cb(void *data, Evas_Object *obj, void *event_info)
    // Code that does the desired action
 }
    -

    This callback function can be registered with the evas_object_smart_callback_add() function:

    -
    -evas_object_smart_callback_add(flipselector, "selected", _flip_selected_cb, NULL);
-
    • diff --git a/org.tizen.ui.practices/html/native/efl/component_focus_n.htm b/org.tizen.ui.practices/html/native/efl/component_focus_n.htm index 6efd6cb..3ebae8b 100644 --- a/org.tizen.ui.practices/html/native/efl/component_focus_n.htm +++ b/org.tizen.ui.practices/html/native/efl/component_focus_n.htm @@ -39,79 +39,82 @@

    Managing Component Focus

    -

    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.

    +

    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.

    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:

    Moving Focus

    -

    Concept of Focus Chain

    -

    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.

    +

    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.

    -

    Focusable Objects

    -

    An object can be focused if the following conditions apply:

    +

    An object can be focused if all of the following conditions apply:

    If any of these conditions do not apply, the object is unfocusable.

    Handling Key Input

    -

    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 Tab 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.

    +

    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 Tab 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.

    -

    Hiding, Deleting or Disabling a Focused Object

    +

    Managing Focus

    +

    To manage focus:

    +

    Customizing Focus

    -

    There are several reasons why to customize the focus chain of an application, for example:

    +

    There are several reasons for customizing the focus chain of an application, for example:

    -

    Customizing Object's Focus Exit Chain

    +

    To customize the focus chain:

    -

    Set the object to focus after other object in a specific direction using elm_object_focus_next_object_set(object, next, direction). Use the following directions:

    +

    Focus on UI Component

    -

    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.

    +

    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.

    -

    Use elm_object_focus_get(object) to set whether a specific object has the focus. Set the focus to an object using elm_object_focus_set(object, set), where set is a Boolean value. If it is set to EINA_TRUE, the focus is set to that given object. If it is set to EINA_False, 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 evas_object_show(object) has been called. Call the function back when the object receives or loses focus by registering on smart event "focused" or "unfocused"

    +

    Use the elm_object_focus_get() function to set whether a specific object has the focus. Set the focus to an object using the elm_object_focus_set() function, where the second parameter is a Boolean value. If it is set to EINA_TRUE, the focus is set to that given object. If it is set to EINA_FALSE, 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 evas_object_show() function has been called. Call the function back when the object receives or loses focus by registering the smart event "focused" or "unfocused"

    -

    Use elm_object_tree_focus_allow_set(object, focusable) to tell Elementary whether an object and its children are focusable, where focusable is a Boolean value. Get the current value using elm_object_tree_focus_allow_get(object).

    +

    Use the elm_object_tree_focus_allow_set() 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 elm_object_tree_focus_allow_get() function.

    -

    The similar functions for a specific object are elm_object_focus_allow_set(object, focusable) and elm_object_focus_allow_get(object).

    +

    The similar functions for a specific object are the elm_object_focus_allow_set() and elm_object_focus_allow_get() functions.

    diff --git a/org.tizen.ui.practices/html/native/efl/component_gengrid_mn.htm b/org.tizen.ui.practices/html/native/efl/component_gengrid_mn.htm index a6db27a..aafeacb 100644 --- a/org.tizen.ui.practices/html/native/efl/component_gengrid_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_gengrid_mn.htm @@ -24,10 +24,10 @@

    Content

    Related Info

    diff --git a/org.tizen.ui.practices/html/native/efl/component_genlist_mn.htm b/org.tizen.ui.practices/html/native/efl/component_genlist_mn.htm index 0e87a7c..2b5a3a6 100644 --- a/org.tizen.ui.practices/html/native/efl/component_genlist_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_genlist_mn.htm @@ -24,11 +24,11 @@

    Content

    Related Info

    @@ -303,57 +315,97 @@ select_cb(void *data, Evas_Object *obj, void *event_info)
    -

    By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use the elm_genlist_multi_select_set() function to select multiple items. In the single-selection mode, the elm_genlist_selected_item_get() function can be called to retrieve the selected item. If several items are selected, the elm_genlist_selected_items_get() function returns a list of the currently selected items.

    +

    By default, the genlist is in a single-selection mode: only one item can be selected at a time and you can use the elm_genlist_selected_item_get() function to retrieve the selected item.

    +

    To activate the multi-selection mode, use the elm_genlist_multi_select_set() function. If several items are selected, use the elm_genlist_selected_items_get() function to return a list of the currently selected items.

    -

    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 selected callback of the genlist item.)

    +

    In the following figure, the 3rd item is disabled and the 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 selected callback of the genlist item.)

    Figure: Genlist item selection highlight

    Genlist item selection highlight

    -

    Using Genlist Callbacks

    +

    Using the Genlist Callbacks

    -

    The genlist component emits the following signals:

    +

    To receive notifications about the genlist events, listen to the following signals:

    diff --git a/org.tizen.ui.practices/html/native/efl/component_genlist_wn.htm b/org.tizen.ui.practices/html/native/efl/component_genlist_wn.htm index 1916193..5381249 100644 --- a/org.tizen.ui.practices/html/native/efl/component_genlist_wn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_genlist_wn.htm @@ -23,12 +23,12 @@

    Content

    Related Info

      @@ -44,7 +44,7 @@

      This feature is supported in wearable applications only.

      -

      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.

      +

      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.

      For more information, see Creating Wearable Genlists and the Genlist API.

      @@ -54,9 +54,18 @@

      Figure: Genlist hierarchy

      Genlist hierarchy

      -

      Defining the Genlist Item Style

      +

      Adding a Genlist Component

      -

      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 labels, contents, and states in the Edje file. The default item style provides 1 text part (elm.text), 2 content parts (elm.swallow.icon and elm.swallow.end) and no state parts.

      +

      To add a genlist component, use the elm_genlist_add() function:

      +
      +Evas_Object *genlist, *parent;
+
+genlist = elm_genlist_add(parent);
+
      + +

      Using the Genlist Item Styles

      + +

      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 labels, contents, and states in the Edje file. The default item style provides 1 text part (elm.text), 2 content parts (elm.swallow.icon and elm.swallow.end), and no state parts.

      The following item styles are available:

        @@ -86,17 +95,15 @@

        For more information on creating a new genlist item style, see Customizing Components.

        -

        Adding a Genlist Component

        +

        Defining the Genlist Item Class

        -

        To add a genlist component, use the elm_genlist_add() function:

        -
        -Evas_Object *genlist, *parent;
-genlist = elm_genlist_add(parent);
-
        +

        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 Elm_Genlist_Item_Class structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.

        -

        Creating and Deleting Items

        +

        You can use the genlist item class for the following purposes:

        +
        • Setting the item styles
          • +
        • Registering callback functions for item realization
          • +
        • Registering a callback function for item deletion
        -

        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 Elm_Genlist_Item_Class structure that informs the genlist component which callbacks to call when an item is created or deleted.

         Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
 
@@ -111,27 +118,31 @@ itc->func.del = _item_del;
 
 
        The item_style, decorate_item_style, and decorate_all_item_style attributes define the names of the item style, the decorate mode item style, and the decorate all item style.
        
 
-
        The func 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 elm_genlist_item_append() function and related item creation functions, and an obj parameter that points to the genlist object itself.
        
+
        The func 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 elm_genlist_item_append() function and related item creation functions, and an obj parameter that points to the genlist object itself.
        
   
          
    
        • text_get
-   
          This function receives a PART 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 strdup() function) corresponding to the PART parameter. The caller is in charge of freeing the string when done.
          • 
+   
          The PART 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 strdup() function) corresponding to the PART parameter. The caller is in charge of freeing the string when done.
          
 
    
        • content_get
-   
          The PART parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return NULL, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is unrealized.
          • 
+   
          The PART parameter is the name string of one of the existing swallow parts in the Edje group. The function returns a valid object handle or NULL (when no content is desired). The object is deleted by the genlist on its deletion or when the item is unrealized.
          
 
    
        • state_get
-   
          The PART parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns EINA_FALSE for false/off or EINA_TRUE for true/on. The default is false. Genlists emit a signal to the PART parameter's theming Edje object with elm,state,xxx,active as emission and elm as source parameter, when the state is true. xxx is the name of the (state) part.
          • 
+   
          The PART parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns EINA_FALSE for false/off or EINA_TRUE for true/on. The default is false. When the state is true, the genlist emits a signal to the PART parameter's theming Edje object using elm,state,xxx,active as the emission parameter and elm as the source parameter. xxx is the name of the (state) part.
          
 
    
        • del
    
          This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.
          • 
 
        
 
-
        Managing Items
        
+
        Managing Genlist Items
        
 
 
        To manage items:
        
 
          
 
        • Add items:
-
          To add an item, several functions can be used. The elm_genlist_item_append() 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 elm_genlist_item_prepend() function is otherwise the same but adds to the beginning of the list or children lists. The elm_genlist_item_insert_before() function inserts an item before the indicated item and the elm_genlist_item_insert_after() function inserts an item after the indicated item.
          
+
          • 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 elm_genlist_item_append() function.
            • 
+
          • To add an item to the beginning of the list or parent list, use the similar elm_genlist_item_prepend() function.
            • 
+
          • To insert an item before the indicated item, use the elm_genlist_item_insert_before() function.
            • 
+
          • To insert an item after the indicated item, use the elm_genlist_item_insert_after() function.
            • 
+
          
 
 
          The functions take one of the following type parameters:
          
   
            
@@ -146,8 +157,11 @@ itc->func.del = _item_del;
 
 
 
-
          • Clear the list:
-
            The application clears the list with the elm_genlist_clear() function, which deletes all the items in the list. The elm_object_item_del() function deletes a specific item. The elm_genlist_item_subitems_clear() function clears all items that are children of the indicated parent item.
            
+
          • Delete items and clear the list:
+
            • To delete a single genlist item, use the elm_object_item_del() function.
              • 
+
            • To clear the list and delete all items, use the elm_genlist_clear() function.
              • 
+
            • To delete all items that are children of the indicated parent item, use the elm_genlist_item_subitems_clear() function.
              • 
+
            
 
            • 
 
          • Inspect list elements:
 
            To help inspect the list items, move to the item at the top of the list with the elm_genlist_first_item_get() function, which returns the item pointer. The elm_genlist_last_item_get() function moves to the item at the end of the list. The elm_genlist_item_next_get() and elm_genlist_item_prev_get() 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.
            
@@ -171,9 +185,11 @@ itc->func.del = _item_del;
 
            • 
 
          
 
-
          Selecting Items
          
+
          Selecting Genlist Items
          
 
-
          Items are manually selected or deselected with the elm_genlist_item_selected_set() function or disabled with the elm_object_item_disabled_set() function. In case there is a tree or a group item, the elm_genlist_item_expanded_set() function is used to expand or contract the item.
          
+
          To select or deselect items manually, use the elm_genlist_item_selected_set() function. To expand or contract a tree or group item, use the elm_genlist_item_expanded_set() function.
          
+
+
          To prevent a selection, you can disable an item with the elm_object_item_disabled_set() function.
    @@ -186,54 +202,97 @@ itc->func.del = _item_del;
    -

    By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use the elm_genlist_multi_select_set() function to select multiple items. In the single-selection mode, the elm_genlist_selected_item_get() function can be called to retrieve the selected item. If several items are selected, the elm_genlist_selected_items_get() function returns a list of the current selected items.

    +

    By default, the genlist is in a single-selection mode: only one item can be selected at a time and you can use the elm_genlist_selected_item_get() function to retrieve the selected item.

    +

    To activate the multi-selection mode, use the elm_genlist_multi_select_set() function. If several items are selected, use the elm_genlist_selected_items_get() function to return a list of the currently selected items.

    -

    In the following figure, the first item is disabled and third and fourth item are selected in the multi-selection mode.

    +

    In the following figure, the first item is disabled and 3rd and 4th item are selected in the multi-selection mode.

    Figure: Genlist item selection highlight

    Genlist item selection highlight

    -

    Using Genlist Callbacks

    +

    Using the Genlist Callbacks

    -

    The genlist component emits the following signals:

    +

    To receive notifications about the genlist events, listen to the following signals:

    diff --git a/org.tizen.ui.practices/html/native/efl/component_glview_mn.htm b/org.tizen.ui.practices/html/native/efl/component_glview_mn.htm index 44c5a7f..a269ce0 100644 --- a/org.tizen.ui.practices/html/native/efl/component_glview_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_glview_mn.htm @@ -24,8 +24,8 @@

    Content

    Related Info

    -

    Using GLView Callbacks

    +

    Using the GLView Callbacks

    -

    The GLView component emits the following signals:

    +

    To receive notifications about the GLView events, listen to the following signals:

    -

    To register a callback for the focused signal:

    +

    To register and define a callback for the focused signal:

     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_glview_wn.htm b/org.tizen.ui.practices/html/native/efl/component_glview_wn.htm
index 5714868..4862afa 100644
--- a/org.tizen.ui.practices/html/native/efl/component_glview_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_glview_wn.htm
@@ -24,8 +24,8 @@
 		
    Content
    
 		
 			
    Related Info
    -

    Set the size of the GLView to 200x200 pixels:

    +
  • Set the size of the GLView. +

    To set the size to 200 x 200 pixels:

     elm_glview_size_set(glview, 200, 200);
    +
    • +

    Configuring the GLView

    -

    Using the GLView API

    - -

    To use the GLView:

    - -
      -
    1. -

      Configure the GLView rendering mode by activating the following rendering modes:

      +

      To configure the GLView:

        -
      • ELM_GLVIEW_ALPHA: Alpha channel rendering mode
        • -
      • ELM_GLVIEW_DEPTH: Depth buffer rendering mode
        • -
      • ELM_GLVIEW_STENCIL: Stencil buffer rendering mode
        • -
      • ELM_GLVIEW_DIRECT: Direct rendering mode
        • -
      • ELM_GLVIEW_CLIENT_SIDE_ROTATION: The client handles the GL view rotation if direct rendering is enabled
        • -
      +
    2. +

      Enable the appropriate GLView rendering modes. The Elm_GLView_Mode enumerator defines the available modes.

      -

      In the following example, the alpha channel and depth buffer rendering mode are enabled.

      +

      To enable the alpha channel and depth buffer rendering modes:

       elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
    3. -

      Set the resize policy. The following example shows how to decide what to do with the GL surface when the GLView component is resized.

      +

      Set the resize policy.

      +

      To set a policy that decides what to do with the GL surface when the GLView component is resized:

       elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
      -

      The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to ELM_GLVIEW_RESIZE_POLICY_SCALE. In that case, only the image object is scaled, not the underlying GL surface.

      +

      The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to ELM_GLVIEW_RESIZE_POLICY_SCALE, in which case only the image object is scaled, not the underlying GL surface.

    4. -

      Set the GLView rendering policy:

      +

      Set the GLView rendering policy.

      +

      To always redraw the GLView component during the rendering loop:

       elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
      -

      The GLView object is always redrawn during the rendering loop. It can also be set to ELM_GLVIEW_RENDER_POLICY_ON_DEMAND (default function), where the GLView component is redrawn only when it is visible.

      +

      The rendering policy can also be set to ELM_GLVIEW_RENDER_POLICY_ON_DEMAND (default function), in which case the GLView component is redrawn only when it is visible.

    5. -

      Register the callbacks:

      - +

      Register callbacks for managing changes in the GLView component state:

      +
        +
      • The initialization callback is called at the GLView component creation.
        • +
      • The deletion callback is called when the GLView component is deleted.
        • +
      • The resize callback is called during the rendering loop when the GLView component is resized.
        • +
      • The render callback is called when the GLView component must be redrawn.
        • +
      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);
      - -
        -
      • elm_glview_init_func_set() registers an init callback that is called at the GLView object creation.
        • -
      • elm_glview_del_func_set() registers a del function that is called when the GLView object is deleted.
        • -
      • elm_glview_resize_func_set() registers the resize function that is called during the rendering loop when the GLView object is resized.
        • -
      • elm_glview_render_func_set() registers the render function that is called when the GLView object must be redrawn.
        • -
      6. -
    + -

    Using GLView Callbacks

    +

    Using the GLView Callbacks

    -

    The GLView component emits the following signals:

    +

    To receive notifications about the GLView events, listen to the following signals:

    -

    To register a callback for the focused signal:

    +

    To register and define a callback for the focused signal:

     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_hoversel_mn.htm b/org.tizen.ui.practices/html/native/efl/component_hoversel_mn.htm
index 8ed4c36..3313426 100644
--- a/org.tizen.ui.practices/html/native/efl/component_hoversel_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_hoversel_mn.htm
@@ -43,7 +43,7 @@
 
  
 
    The hoversel component is a button that pops up a list of items (automatically choosing the direction to display).
    
-
    The hoversel component inherits from the button component, which means that all button functions can be used on the hoversel component.
    
+
    The hoversel component inherits from the button component, which means that button functions can be used on the hoversel component.
    
 
 
    For more information, see the Hoversel API.
    
 
@@ -56,7 +56,7 @@
 
 
    Adding a Hoversel Component
    
 
-
    To create a hoversel component, use the elm_hoversel_add() function. When activated, the component automatically chooses the direction in which to display itself in its parent object's view.
    
+
    To create a hoversel component, use the elm_hoversel_add() function:
    
 
 
     Evas_Object *hoversel, *parent;
@@ -64,32 +64,37 @@ Evas_Object *hoversel, *parent;
 // Create a hoversel
 hoversel = elm_hoversel_add(parent);
 
    
+
    When activated, the hoversel automatically selects the direction in which to display itself in its parent object's view.
    
 
 
    Configuring the Hoversel
    
 
 
    To configure the hoversel:
    diff --git a/org.tizen.ui.practices/html/native/efl/component_icon_wn.htm b/org.tizen.ui.practices/html/native/efl/component_icon_wn.htm index f5ef152..27b4e61 100644 --- a/org.tizen.ui.practices/html/native/efl/component_icon_wn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_icon_wn.htm @@ -24,8 +24,8 @@

    Content

    Related Info

    diff --git a/org.tizen.ui.practices/html/native/efl/component_image_mn.htm b/org.tizen.ui.practices/html/native/efl/component_image_mn.htm index 4a13787..e93ccac 100644 --- a/org.tizen.ui.practices/html/native/efl/component_image_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_image_mn.htm @@ -24,8 +24,8 @@

    Content

    Related Info

    -

    Using Image Callbacks

    +

    Using the Image Callbacks

    -

    The image component emits the following signals:

    +

    To receive notifications about the image events, listen to the following signals:

    -

    To register a callback when a user clicks on the image:

    +

    To register and define a callback for the clicked signal:

     {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_index_mn.htm b/org.tizen.ui.practices/html/native/efl/component_index_mn.htm
index 0f3d675..07ba161 100644
--- a/org.tizen.ui.practices/html/native/efl/component_index_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_index_mn.htm
@@ -24,9 +24,9 @@
 		
    Content
    
 		
@@ -43,15 +43,12 @@
 
 
    This feature is supported in mobile applications only.
    
  
-
    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.
    
-
    There are 2 styles of index components:
    
+
    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.
    
 
-
 
 
    For more information, see the Index API.
    
 
-
    Figure: Index component (fastscroll on right and pagecontrol on left)
     
+
    Figure: Index component (fastscroll style on right and pagecontrol style on left)
     
 
     Index (fastscroll) component Index (pagecontrol) component 
     
  
 
    Figure: Index hierarchy
     
@@ -67,11 +64,14 @@ Evas_Object *index, *parent;
 index = elm_index_add(parent);
    -

    Modifying the Index Styles

    +

    Using the Index Styles

    -

    The index component style can be set with the elm_object_style_set() function to default (fastscroll) or pagecontrol.

    +

    The index component has 2 styles:

    -

    To set the pagecontrol style:

    + + +

    To set the style, use the elm_object_style_set() function:

     elm_object_style_set(index, "pagecontrol");
    @@ -86,34 +86,36 @@ char *style = elm_object_style_get(index);

    To configure the index component:

    -

    Adding Items

    +

    Adding Index Items

    -

    To add items:

    +

    To add index items:

    1. -

      Add the list item object at the letter A, calling the it_select_cb() smart callback when this item is selected:

      +

      Add a list item object at the letter A, calling the it_select_cb() smart callback when this item is selected:

       Elm_Object_Item *list_item1, *list_item2;
 elm_index_item_append(index, "A", it_select_cb, list_item1);
      +

      The elm_index_item_append() function appends the indexes to the existing ones. It is also possible to prepend index items with the elm_index_item_prepend() function.

    2. Define the smart callback:

      -// 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)
 {
@@ -123,13 +125,13 @@ it_select_cb(void *data, Evas_Object *obj, void *event_info)
    -

    In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with the elm_index_item_prepend() function.

    +

    Sorting Index Items

    -

    You can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.

    +

    You can insert index items using a sorting function. Indexes can be sorted, for example, in an alphabetic order.

    -

    You must write a compare function that returns a positive int, 0 or a negative int when the data2 item parameter is respectively greater than, equal to or lower than the data1 parameter.

    +

    Define a compare function that returns a positive int, 0 or a negative int when the data2 item parameter is respectively greater than, equal to, or lower than the data1 parameter.

     static int
@@ -137,13 +139,13 @@ _index_icmp(const void *data1, const void *data2)
 {
    int result;
 
-   // Code that does the item comparison is written here
+   // Code that does the item comparison is here
 
    return result;
 }
    -

    The following example shows how to add a new item at the B index using the compare function to sort the indexes.

    +

    To add a new item at the B index using the compare function to sort the indexes:

     elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp, NULL);
@@ -151,17 +153,19 @@ elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp
 
 
    Using the Index Callbacks
    
 
-
    The index component emits the following signals:
    
+
    To receive notifications about the index events, listen to the following signals:
    
   
 
-
    When the user selects an item in the index, the selected signal is emitted.
    
-
    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):
    
+
    Register and define the associated callback to perform appropriate actions. For example, when the selected signal occurs, show a given area or child object depending on the selected index item:
    
 
     static void
 _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
@@ -170,10 +174,7 @@ _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
 
    // Code that does the desired action
 }
-
    
 
-
    Register the callback to the selected signal:
    
-
     evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
 
    
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_index_wn.htm b/org.tizen.ui.practices/html/native/efl/component_index_wn.htm
index 3397e7f..fec65c2 100644
--- a/org.tizen.ui.practices/html/native/efl/component_index_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_index_wn.htm
@@ -24,8 +24,8 @@
 		
    Content
    
 		
 			
    Related Info
    -

    Adding Items

    +

    Adding Index Items

    -

    To add items:

    +

    To add index items:

    1. -

      Add the list item object at the letter A, calling the it_select_cb() smart callback when this item is selected:

      +

      Add a list item object at the letter A, calling the it_select_cb() smart callback when this item is selected:

       Elm_Object_Item *list_item1, *list_item2;
 elm_index_item_append(index, "A", it_select_cb, list_item1);
      +

      The elm_index_item_append() function appends the indexes to the existing ones. It is also possible to prepend index items with the elm_index_item_prepend() function.

    2. Add item objects, calling the it_select_cb() smart callback when the item is selected:

      @@ -82,7 +85,7 @@ for (i = 0; i < 5; ++i)

    3. Define the smart callback:

      -// 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)
 {
@@ -91,23 +94,23 @@ it_select_cb(void *data, Evas_Object *obj, void *event_info)
    -

    In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with the elm_index_item_prepend() function.

    -

    Using Index Callbacks

    +

    Using the Index Callbacks

    -

    The index component emits the following signals:

    +

    To receive notifications about the index events, listen to the following signals:

    -

    When the user selects an item in the index, the selected signal is emitted.

    - -

    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):

    +

    Register and define the associated callback to perform appropriate actions. For example, when the selected signal occurs, show a given area or child object depending on the selected index item:

     static void
 _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
@@ -116,10 +119,7 @@ _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
 
    // Code that does the desired action
 }
-
    -

    Register the callback to the selected signal:

    -
     evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
    diff --git a/org.tizen.ui.practices/html/native/efl/component_label_mn.htm b/org.tizen.ui.practices/html/native/efl/component_label_mn.htm index 52d3437..bcedf69 100644 --- a/org.tizen.ui.practices/html/native/efl/component_label_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_label_mn.htm @@ -24,7 +24,6 @@

    Content

    @@ -41,7 +40,7 @@

    This feature is supported in mobile applications only.

    -

    The label component displays text with a simple html-like markup.

    +

    The label component displays text with a simple HTML-like markup.

    For more information, see the Label API.

    @@ -53,7 +52,7 @@

    Adding a Label Component

    -

    To add a label and set the text in it:

    +

    To create a label, use the elm_label_add() function. You can set the label text with the elm_object_text_set() function.

     Evas_Object *label = elm_label_add(win);
@@ -61,62 +60,58 @@ Evas_Object *label = elm_label_add(win);
 elm_object_text_set(label, "Some long text for our label, that is not so long");
    -

    Using the Label Styles

    +

    Configuring the Label

    -

    Label displays the text with the following predefined styles:

    +

    To configure the label:

    +
      +
    1. +

      Modify the style with which the label component displays text.

      +

      The following styles are available:

      • default: No animation
      • marker: The text is centered and bolded.
        • -
      • slide_long: 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).
        • -
      • slide_short: 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.
        • +
      • slide_long: 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).
        • +
      • slide_short: 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.
      • slide_bounce: 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.
      -

      In the following example, the style is set to slide_long.

      - 
      -elm_object_style_set(label, "slide_long");
+elm_object_style_set(label, "slide_bounce");
      - -

      Configuring the Label

      - -

      To configure the label:

      -
        +
      1. -

        Set the duration of the animation and the slide mode:

        +

        If you use a slide-type style for the text, you can also set the slide mode and animation duration:

         elm_label_slide_duration_set(label, 3);
 elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
        2. -
      2. -

        Modify the style:

        -
        -elm_object_style_set(label, "slide_bounce");
-
        -
        3. +

      Using the Label Callbacks

      -

      The label component emits the following signals:

      +

      To receive notifications about the label events, listen to the following signals:

        -
      • language,changed: The program's language changes.
        • +
      • language,changed: The program language is changed.
      • slide,end: The slide reaches the end.
        • -
      • anchor,clicked: The anchor is clicked. event_info points to an object of the type Elm_Label_Anchor_Info.
        • -
      • anchor,mouse,down event_info points to an object of the type Elm_Label_Anchor_Info.
        • -
      • anchor,mouse,up event_info points to an object of the type Elm_Label_Anchor_Info.
        • +
      • anchor,clicked: The anchor is clicked. +

        The event_info callback parameter points to an Elm_Label_Anchor_Info object.

        • +
      • anchor,mouse,down: The anchor is pressed by mouse down. +

        The event_info callback parameter points to an Elm_Label_Anchor_Info object.

        • +
      • anchor,mouse,up: The anchor is released by mouse up. +

        The event_info callback parameter points to an Elm_Label_Anchor_Info object.

      -

      The following example registers a callback on the slide,end signal.

      +

      To register and define a callback for the slide,end signal:

       {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_label_wn.htm b/org.tizen.ui.practices/html/native/efl/component_label_wn.htm
index 0dbe0d7..8fc2983 100644
--- a/org.tizen.ui.practices/html/native/efl/component_label_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_label_wn.htm
@@ -24,7 +24,6 @@
 		
      Content
      
 		
@@ -42,7 +41,7 @@
 
 
      This feature is supported in wearable applications only.
      
 
-
      The label component displays text with a simple html-like markup.
      
+
      The label component displays text with a simple HTML-like markup.
      
 
 
      For more information, see the Label API.
      
 
@@ -54,7 +53,7 @@
 
 
      Adding a Label Component
      
 
-
      To add a label and set the text in it:
      
+
      To create a label, use the elm_label_add() function. You can set the label text with the elm_object_text_set() function.
      
 
 
       Evas_Object *label = elm_label_add(win);
@@ -62,63 +61,59 @@ Evas_Object *label = elm_label_add(win);
 elm_object_text_set(label, "Some long text for our label, that is not so long");
 
      
 
-
      Using the Label Styles
      
+
      Configuring the Label
      
 
-
      Label displays the text with the following predefined styles:
      
+
      To configure the label:
      
+
        
+
      1. 
+
        Modify the style with which the label component displays text.
        
+
        The following styles are available:
        
   
           
    
        • default: No animation
          •  
    
        • marker: The text is centered and bolded.
          •  
-   
        • slide_long: 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).
          •  
+   
        • slide_long: 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).
          •  
    
        • slide_roll: 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.
          • 
-   
        • slide_short: 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.
          •  
+   
        • slide_short: 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.
          •  
    
        • slide_bounce: 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.
          •    
   
        
 
-
        In the following example, the style is set to slide_roll.
        
-
 
         elm_object_style_set(label, "slide_roll");
 
        
-
-
        Configuring the Label
        
-
-
        To configure the label:
        
-
          
+
 
        1. 
-
          Set the duration of the animation and the slide mode:
          
+
          If you use a slide-type style for the text, you can also set the slide mode and animation duration:
          
 
           elm_label_slide_duration_set(label, 3);
 elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
 
          
 
          2. 
-
        2. 
-
          Modify the style:
          
-
          -elm_object_style_set(label, "slide_bounce");
-
          
-
          3. 
+
 
        
 
 
        Using the Label Callbacks
        
 
-
        The label component emits the following signals:
        
+
        To receive notifications about the label events, listen to the following signals:
        
   
          
-   
        • language,changed: The program's language changes.
          • 
+   
        • language,changed: The program language is changed.
          • 
    
        • slide,end: The slide reaches the end.
          • 
-   
        • anchor,clicked: The anchor is clicked. event_info points to an object of the type Elm_Label_Anchor_Info.
          • 
-   
        • anchor,mouse,down event_info points to an object of the type Elm_Label_Anchor_Info.
          • 
-   
        • anchor,mouse,up event_info points to an object of the type Elm_Label_Anchor_Info.
          • 
+   
        • anchor,clicked: The anchor is clicked. 
+   
          The event_info callback parameter points to an Elm_Label_Anchor_Info object.
          • 
+   
        • anchor,mouse,down: The anchor is pressed by mouse down. 
+   
          The event_info callback parameter points to an Elm_Label_Anchor_Info object.
          • 
+   
        • anchor,mouse,up: The anchor is released by mouse up. 
+   
          The event_info callback parameter points to an Elm_Label_Anchor_Info object.
          • 
   
        
   
-
        The following example registers a callback on the slide,end signal.
        
+
        To register and define a callback for the slide,end signal:
        
 
 
         {
    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)
 {
diff --git a/org.tizen.ui.practices/html/native/efl/component_list_mn.htm b/org.tizen.ui.practices/html/native/efl/component_list_mn.htm
index faddc84..6afe29f 100644
--- a/org.tizen.ui.practices/html/native/efl/component_list_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_list_mn.htm
@@ -24,12 +24,10 @@
 		
        Content
        
 		
 			
        Related Info
        
@@ -46,9 +44,7 @@
 
        This feature is supported in mobile applications only.
        
 
   
- 
        The list is a very simple UI component. It is not to be used to manage many items. For longer lists, use the Genlist.
        
-
- 
        The list items can contain a piece of text and two contents (start and end). These are set with the elm_object_item_*() functions. 
        
+ 
        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 Genlist.
        
 
  
        For more information, see the List API.
        
  
@@ -68,42 +64,17 @@ Evas_Object *list, *parent;
 list = elm_list_add(parent);
 
        
 
-
        Using the List
        
+
        Adding List Items
        
 
-
        To use the list:
        
-
          
-
        • Use scroller functions:
-
          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.
          
-
          -Evas_Object *list;
+ 
          A list item can contain a piece of text and 2 contents (start and end). To set the individual elements of an item, use the elm_object_item_XXX() functions.
          
 
-// 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);
-
          
-
          • 
-
        • Select items:
-
          The elm_list_multi_select_set() function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to selected.
          
-
-
          -Evas_Object *list;
-
-// Activate multi selection 
-elm_list_multi_select_set(list, EINA_TRUE);
-
          
-
          • 
-
        
-
-
        Adding Items to the List
        
-
- 
        Items are added with the elm_list_item_append() or elm_list_item_prepend() 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.
        
+
        To add an item to the list, use the elm_list_item_append() or elm_list_item_prepend() function. In the following example, 10 items with text and 1 icon are added. The last 2 parameters of the elm_list_item_append() function are the callback function when the created item is selected and the data passed to the callback function.
        
 
 
         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)
 {
@@ -121,14 +92,19 @@ for (i = 0; i < 10; i++)
    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);
 }
 
        
- 
-
        Changing the Text or Icon of an Item
        
 
-
        To change the state of an item, use all the functions relative to Elm_Object_Item. Each item of the list contains 2 instances of an evas_object. Give those as the third and the fourth parameters when you append or prepend the item in the list. The evas_object instances are changed with the elm_object_item_part_content_set() function. The first object is referenced as the start object in the theme, and the second one is referenced as the end object. Give these names when you use the elm_object_item_part_content_set() functions. The label of the item is changed using the elm_object_item_text_set() function.
        
+
        Modifying List Items
        
+
+
        To modify the list item elements, use the Elm_Object_Item functions:
        
+
+
          
+
        • To modify the item label, use the elm_object_item_text_set() function.
          • 
+
        • To modify the 2 contents, use the elm_object_item_part_content_set() function, referencing the first object as the start object in the theme and the second one as the end object.
+
          Each content is an evas_object instance, and they are defined as the third and the fourth parameters when you append or prepend the item in the list with the elm_list_item_append() or elm_list_item_prepend() function.
        
 
 
         Evas_Object *list;
@@ -150,10 +126,43 @@ elm_object_item_part_content_set(it, "end", ic);
 // Change the label 
 elm_object_item_text_set(it, "I've been selected !");
 
        
-  
-
        Retrieving Selected Items
        
 
-
        The list of the currently selected items is retrieved with the elm_list_selected_items_get() function. If the multiselect mode is false, you can retrieve the only selected item with the elm_list_selected_item_get() function. For example, this is how to unselect all previously selected items.
        
+
        Accessing and Selecting List Items
        
+
+
        To access and select list items:
        
+
          
+
        • Configuring the scroller:
+
          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:
          
+
          +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);
+
          
+
          • 
+
        • Enabling the multi-selection mode:
+
          To enable multiple items to be selected at the same time, enable the multi-selection mode with the elm_list_multi_select_set() function. Each time an item is clicked, its state changes to selected.
          
+
+
          +Evas_Object *list;
+
+// Enable multi-selection mode
+elm_list_multi_select_set(list, EINA_TRUE);
+
          
+
          • 
+
+
        • Selecting items:
+
          To find out whether an item is selected, use the elm_list_item_selected_get() function. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.
          
+
          To set an item as selected, use the elm_list_item_selected_set() function.
          
+
          • 
+
+
        • Retrieving selected items:
+
          To retrieve the list of the currently selected items, use the elm_list_selected_items_get() function.
          
+
          If the multi-selection mode is disabled, only 1 item can be selected, and you can retrieve it with the elm_list_selected_item_get() function.
          
+
+
          To retrieve all selected items and set their state to unselected:
          
 
 
           Evas_Object *list; Eina_List *l;
@@ -164,17 +173,17 @@ Elm_Object_Item *it;
 selected_items = elm_list_selected_items_get(list);
 EINA_LIST_FOREACH(selected_items, l, it)
    elm_list_item_selected_set(it, EINA_FALSE);
-
          
-
-
          Using List Item Operations
          
-
-
          To find out if an item is selected, call the elm_list_item_selected_get() function. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.
          
+
      2. -

      Elementary list provides 2 functions for sliding a list to a specific item. The elm_list_item_show() function shows the item passed as a parameter, whereas the elm_list_item_bring_in() function shows the item, but only after animating the slide.

      - -

      You can go to the item immediately preceding a specific item with the elm_list_item_prev() function, or to the one immediately following a specific item with the elm_list_item_next() function.

      +
    2. Moving within the list: +

      The list component provides various functions for moving within the list and sliding the list to a specific item:

      +
        +
      • The elm_list_item_show() function shows the item passed as a parameter.
        • +
      • The elm_list_item_bring_in() function shows the item passed as a parameter, after animating the slide.
        • +
      • The elm_list_item_prev() function goes to the item immediately preceding a specific item.
        • +
      • The elm_list_item_next() function goes to the item immediately following a specific item.
      -

      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.

      +

      To retrieve the currently selected item and unselect it, and then select the next item and bring it to the screen:

       Evas_Object *list;
@@ -184,26 +193,33 @@ elm_list_item_selected_set(current, EINA_FALSE);
 next = elm_list_item_next(current);
 elm_list_item_selected_set(next, EINA_TRUE);
 elm_list_item_bring_in(next);
-
      +
      3. -

      Using List Callbacks

      +

      Using the List Callbacks

      -

      The list component emits the following signals:

      +

      To receive notifications about the list events, listen to the following signals:

      -

      The following example shows how to register to the clicked,double signal. Note that the currently double-clicked item can be retrieved using the event_info pointer. This following code registers to the double,clicked signal and unselects the item that has been double-clicked.

      +

      To register and define a callback for the clicked,double signal:

       {
@@ -212,13 +228,13 @@ elm_list_item_bring_in(next);
    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);
 }
      diff --git a/org.tizen.ui.practices/html/native/efl/component_list_wn.htm b/org.tizen.ui.practices/html/native/efl/component_list_wn.htm index 6f61125..cb2ac29 100644 --- a/org.tizen.ui.practices/html/native/efl/component_list_wn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_list_wn.htm @@ -24,12 +24,11 @@

      Content

      Related Info

      Related Info

    @@ -131,7 +146,7 @@ elm_map_overlay_icon_set(forest_class, icon); - +
    Note
    Do not use the same icon object for two different overlays. Create a new icon object each time you need one.Do not use the same icon object for 2 different overlays. Create a new icon object each time you need one.
    @@ -160,15 +175,14 @@ elm_map_overlay_data_set(ovl, &data_fausses); elm_map_overlay_class_append(forest_class, ovl); -

    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.

    +

    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.

     elm_map_overlay_class_zoom_max_set(forest_class, 8);
    -
  • Add bubbles to follow an overlay. -

    The following example shows how to set content in a bubble following an overlay.

    +
  • Add a bubble to follow an overlay: 
     // Add an overlay bubble object 
@@ -178,31 +192,32 @@ Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
 elm_map_overlay_bubble_follow(bubble, ovl);
    -

    Once following an overlay, the bubble appears, moves, or hides following the parent overlay's behavior.

    +

    Once the bubble has been set to follow the overlay, it appears, moves, and hides following the parent overlay's behavior.

    Add content to the bubble with the elm_map_overlay_bubble_content_append() function.

    • -
  • Add other overlays. - -

    You can draw a circle on the map with coordinates and a radius size.

    +
  • Add other overlays: +

    • Calculating Routes

    -

    A route between a starting point and an ending point is calculated with the elm_map_route_add() function. The type of transport and the routing calculation method can be provided so as to have the desired result.

    +

    To calculate a route between a starting point and an ending point, use the elm_map_route_add() function. The type of transport and the routing calculation method can be provided to achieve the desired result.

    -

    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.

    +

    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.

     Elm_Map_Route *route = elm_map_route_add(map,
@@ -216,7 +231,7 @@ Elm_Map_Route *route = elm_map_route_add(map,
 evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
    -

    Once the route is calculated, create a route overlay object and change its color. In this example, the route,loaded callback is used.

    +

    Once the route is calculated, use the route,loaded callback to create a route overlay object and change its color:

     static void
 _route_loaded_cb(void *data, Evas_Object *obj, void *ev)
@@ -228,31 +243,31 @@ _route_loaded_cb(void *data, Evas_Object *obj, void *ev)
 }
    -

    Using Map Callbacks

    +

    Using the Map Callbacks

    -

    The map component emits the following callbacks:

    +

    To receive notifications about the map events, listen to the following signals:

    diff --git a/org.tizen.ui.practices/html/native/efl/component_notify_mn.htm b/org.tizen.ui.practices/html/native/efl/component_notify_mn.htm index 45f1870..666f18e 100644 --- a/org.tizen.ui.practices/html/native/efl/component_notify_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_notify_mn.htm @@ -25,7 +25,7 @@

    Related Info

    Setting Raw Data to Image Object

    -

    Users can set raw data to the image object manually using the evas_object_image_data_set() 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.

    - -
    void evas_object_image_data_set(Evas_Object *obj, void *data);
    - -

    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 evas_object_image_size_set() function.

    +

    You can set raw data to the image object manually using the evas_object_image_data_set() 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.

    -
    void evas_object_image_size_set(Evas_Object *obj, int w, int h);
    +

    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 evas_object_image_size_set() function.

    -

    The evas_object_image_data_get() 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 EINA_TRUE for for_writing, Evas updates the image pixels in the next rendering cycle.

    - -
    void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);
    +

    The evas_object_image_data_get() 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 EINA_TRUE for for_writing, Evas updates the image pixels in the next rendering cycle.

    The evas_object_image_data_update_add() helps to mark the updated area for rendering efficiency.

    -
    void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);
    - -

    The following example code and figure show how to specify the area to update.

    +

    The following example code and figure show how to specify the area to update:

     evas_object_image_data_update_add(image, 100, 100, 50, 50);
 evas_object_image_data_update_add(image, 180, 100, 50, 50);
@@ -494,12 +479,11 @@ evas_object_image_data_update_add(image, 85, 200, 160, 80);
 
 
    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 evas_object_image_save() function.
    
 
-
    Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);
    
-
 
     #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);
 
@@ -545,7 +529,8 @@ void image_blur(Evas_Object *img)
    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);
 
@@ -618,44 +603,44 @@ evas_object_image_preload(next, EINA_TRUE);
 
 
    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.
    
 
    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.
    
-
    To set markup to format text, use for example <font_size=50>Big!</font_size>. Set more than one style directive in one tag with <font_size=50 color=#F00>Big and Red!</font_size>. Please note that we used </font_size> 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 <font_size=30>Big</>, which pop any type of format, but it is advisable to use the named alternatives instead.
    
+
    To set markup to format text, use for example <font_size=50>Big!</font_size>. Set more than one style directive in one tag with <font_size=50 color=#F00>Big and Red!</font_size>. Note that </font_size> 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 <font_size=30>Big</>, which pop any type of format, but it is advisable to use the named alternatives instead.
    
 
    Textblock supports the following formats:
    
 
      
-
    • font: Font description in fontconfig such as format, for example "Sans:style=Italic:lang=hi" or "Serif:style=Bold".
      • 
-
    • font_weight: 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".
      • 
-
    • font_style: 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".
      • 
-
    • font_width: 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".
      • 
-
    • lang: Overrides the language defined in "font". For example, "lang=he" is the same as "font=:lang=he".
      • 
+
    • font: Font description in fontconfig such as format, for example "Sans:style=Italic:lang=hi" or "Serif:style=Bold".
      • 
+
    • font_weight: 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.
      • 
+
    • font_style: 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.
      • 
+
    • font_width: 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.
      • 
+
    • lang: Overrides the language defined in font. For example, lang=he is the same as font=:lang=he.
      • 
 
    • font_fallbacks: A comma delimited list of fonts to try if finding the main font fails.
      • 
 
    • font_size: The font size in points.
      • 
 
    • font_source: The source of the font, for example an eet file.
      • 
-
    • color: The text color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • underline_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • underline2_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • outline_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • shadow_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • glow_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • glow2_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • strikethrough_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • align: 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%.
      • 
-
    • valign: 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%.
      • 
-
    • wrap: The text wrap in one of the following formats: "word", "char", "mixed", or "none".
      • 
-
    • left_margin: Either "reset" or a pixel value indicating the margin.
      • 
-
    • right_margin: Either "reset" or a pixel value indicating the margin.
      • 
-
    • underline: The style of underlining in one of the following formats: "on", "off", "single", or "double".
      • 
-
    • strikethrough: The style of text that is either "on" or "off".
      • 
-
    • backing_color: The background color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
      • 
-
    • backing: The background color enabled or disabled: "on" or "off".
      • 
-
    • style: 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".
      • 
+
    • color: The text color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • underline_color: The color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • underline2_color: The color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • outline_color: The color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • shadow_color: The color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • glow_color: The color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • glow2_color: The color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • strikethrough_color: The color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • align: 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%.
      • 
+
    • valign: 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%.
      • 
+
    • wrap: The text wrap in one of the following formats: word, char, mixed, or none.
      • 
+
    • left_margin: Either reset or a pixel value indicating the margin.
      • 
+
    • right_margin: Either reset or a pixel value indicating the margin.
      • 
+
    • underline: The style of underlining in one of the following formats: on, off, single, or double.
      • 
+
    • strikethrough: The style of text that is either on or off.
      • 
+
    • backing_color: The background color in one of the following formats: #RRGGBB, #RRGGBBAA, #RGB, or #RGBA.
      • 
+
    • backing: The background color enabled or disabled: on or off.
      • 
+
    • style: 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.
      • 
 
    • tabstops: The pixel value for tab width.
      • 
 
    • linesize: To force a line size in pixels.
      • 
 
    • linerelsize: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.
      • 
 
    • linegap: To force a line gap in pixels.
      • 
 
    • linerelgap: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.
      • 
-
    • item: 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.
      • 
+
    • item: 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.
      • 
 
    • linefill: Either a float value or percentage indicating how much to fill the line.
      • 
 
    • ellipsis: 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.
      • 
-
    • password: Either "on" or "off", this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. 
      • 
+
    • password: Either on or off, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. 
      • 
 
    
 
 
@@ -664,8 +649,9 @@ evas_object_image_preload(next, EINA_TRUE);
 
    Limiting Visibility 
    
 
    An Evas object can be clipped – in other words, its visible area is restricted with the clipper object.
    
 
-
    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 evas_object_color_set()) and give it a position and size of what is wanted visible. The following code exemplifies showing the center half of my_evas_object: 
    
-
    Evas_Object *clipper = evas_object_rectangle_add(evas_canvas);
+
    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 evas_object_color_set() 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 my_evas_object: 
    
+
    +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);
@@ -673,8 +659,9 @@ evas_object_show(clipper);
 
    
 
 
    Layer of Color 
    
-
    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.
    
-
    Evas_Object *clipper = evas_object_rectangle_add(evas);
+
    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.
    
+
    +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);
@@ -685,12 +672,13 @@ evas_object_show(clipper);
 
 
    Mapping Objects
    
 
-
    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.
    
+
    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.
    
 
 
    Creating a Map 
    
-
    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.
    
-
    The coordinates for each point are set with evas_map_point_coord_set(map, index, x, y, z). In the example below, there is a rectangle whose coordinates are (100, 100) and (300, 300).
    
-
    Evas_Object *object = evas_object_rectangle_add(evas);
+
    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.
    
+
    The coordinates for each point are set with the evas_map_point_coord_set() function. In the following example, there is a rectangle whose coordinates are (100, 100) and (300, 300).
    
+
    +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);
@@ -699,56 +687,66 @@ evas_map_point_coord_set(map, 1, 300, 100, 0);
 evas_map_point_coord_set(map, 2, 300, 300, 0);
 evas_map_point_coord_set(map, 3, 100, 300, 0);
 
    
-
    There are functions to ease the process.
    
-
    Use evas_map_util_points_populate_from_geometry(map, x, y, w, h, z), where the map coordinates are set to the given rectangle, and z is the coordinate in the Z axis, which is the same for all points.
    
-
    Evas_Object *object = evas_object_rectangle_add(evas);
+
    To ease the process:
    
+
      
+
    • 
+
      Use the evas_map_util_points_populate_from_geometry() 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.
      
+
      +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);
 
      
-
-
      You can also use evas_map_util_points_populate_from_object(map, object). 
      
-
      Evas_Object *object = evas_object_rectangle_add(evas);
+
      • 
+
    • 
+
      You can also use the evas_map_util_points_populate_from_object() function.
      
+
      +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);
 
      
-
-
      You can also use evas_map_util_points_populate_from_object_full(map, object, z), where z is the coordinate in the Z axis, which is the same for all points. 
      
+
      • 
+
    • 
+
      You can also use evas_map_util_points_populate_from_object_full(), where the last parameter is the coordinate in the Z axis, which is the same for all points. 
      
 
      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);
 
      
-
+
      • 
+
    
 
    Manual Point Setting
    
-
    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.
    
-
    evas_map_point_coord_set(map, 0, 300, 100, 0);
+
    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.
    
+
    +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);
 
    
 
-
    The Z coordinate is not used when setting points by hand; thus its value is not important.
    
+
    The Z coordinate is not used when setting points by hand, and thus its value is not important.
    
 
 
    Applying a Map 
    
-
    Regardless of the specific way you create a map, to apply it to a specific object, use
    
-
    evas_object_map_set(object, map);
+
    Regardless of the specific way you create a map, to apply it to a specific object, use the following functions:
    
+
    +evas_object_map_set(object, map);
 evas_object_map_enable_set(object, EINA_TRUE);
 
    
 
 
    Basic Utility Functions 
    
 
    Evas provides utility functions for common transformations:
    
 
      
-
    • evas_map_util_rotate(map, angle, cx, cy): This performs a rotation of the angle degrees around the center point with the coordinates (cx, cy).
      • 
-
    • evas_map_util_zoom(map, zoomx, zoomy, cx, cy): This performs a zoomx and zoomy zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).
      • 
+
    • evas_map_util_rotate(): This function performs a rotation of the angle degrees around the center point with the coordinates (cx, cy).
      • 
+
    • evas_map_util_zoom(): This function performs a zoomx and zoomy zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).
      • 
 
    
 
 
    For example, the following code rotates an object around its center.
    
-
    int x, y, w, h;
+
    +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);
@@ -759,7 +757,8 @@ evas_map_free(m);
 
    
 
 
    The following code rotates an object around the center of the window.
    
-
    int w, h;
+
    +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);
@@ -771,21 +770,21 @@ evas_map_free(m);
 
 
    3D Utility Functions 
    
 
    Evas provides utility functions for 3D transformations.
    
-
    To make a 3D rotation, use evas_map_util_3d_rotate(map, anglex, angley, anglez, cx, cy, cz). With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.
    
-
    Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with evas_map_util_3d_perspective(map, px, py, z0, focal) on the map after its position has been set.
    
+
    To make a 3D rotation, use the evas_map_util_3d_rotate() function. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.
    
+
    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 evas_map_util_3d_perspective() function on the map after its position has been set. Use the following parameters:
    
 
 
      
 
    • px and py specify the "infinite distance" point in the 3D conversion, where all lines converge to.
      • 
 
    • z0 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.
      • 
 
    • focal 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 z0 value; this function allows for some "depth" control.
      • 
 
    
-
    Color and Lighting 
    
-
    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 evas_map_point_color_set(map, index, r, g, b, a) for each point of the map, or evas_map_util_points_color_set(map, r, g, b, a) to set every point into the same color.
    
-
    To add lighting for the objects, which is useful with 3D transforms, use evas_map_util_3d_lighting(map, lightx, lighty, lightz, lightr, lightg, lightb, ambientr, ambientg, ambientb):
    
+
    Color and Lighting
    
+
    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 evas_map_point_color_set(map, index, r, g, b, a) for each point of the map, or evas_map_util_points_color_set() to set every point into the same color.
    
+
    To add lighting for the objects, which is useful with 3D transforms, use the evas_map_util_3d_lighting() function with the following parameters:
    
 
      
 
    • lightx, lighty and lightz are the local light source coordinates;
      • 
 
    • lightr, lightg and lightb are the local light source colors;
      • 
-
    • ambientr, ambientg and ambientb 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.
      • 
+
    • ambientr, ambientg and ambientb 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.
      • 
 
    
 
 
diff --git a/org.tizen.ui.practices/html/native/efl/evas_rendering_n.htm b/org.tizen.ui.practices/html/native/efl/evas_rendering_n.htm
index 4f49d4e..f2c6826 100644
--- a/org.tizen.ui.practices/html/native/efl/evas_rendering_n.htm
+++ b/org.tizen.ui.practices/html/native/efl/evas_rendering_n.htm
@@ -39,7 +39,7 @@
 
  
    Evas Rendering Concept and Method
    
  
-
    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.
    
+
    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.
    Immediate mode display systems retain very little or no state. A program executes a series of commands, as in the following pseudo code.
     draw line from position (0, 0) to position (100, 200);
@@ -51,25 +51,25 @@ scale bitmap_handle to size 100 x 100;
 draw image bitmap_handle at position (10, 30);
 
    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.
    
-
    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.
    
-
    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.
    
+
    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.
    
+
    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.
     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);
 
    
 
-
    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.
    
+
    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.
    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.
    For example, see the following pseudo code.
    @@ -90,24 +90,24 @@ show bitmap_handle;
 render scene;
 
    
 
-
    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.
    
-
    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.
    
-
    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.
    
+
    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.
    
+
    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.
    
+
    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.
    For more information on the UI rendering modes (immediate and retained), see UI Rendering Mode.
    Evas Engines Concept 
    
-
    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.
    
-
    Evas can work with and provides multiple engines, such as (this list is non-exhaustive):
    
+
    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.
    
+
    Evas can work with and provides multiple engines, such as:
      
-
    • buffer: all the rendering takes place in a buffer
      • 
-
    • fb: the rendering takes place in the system's framebuffer
      • 
-
    • software_x11: this is the most used, using X11
      • 
-
    • gl_x11: this also renders to an X11 window, except that it uses OpenGL
      • 
+
    • buffer: All the rendering takes place in a buffer
      • 
+
    • fb: The rendering takes place in the system's framebuffer
      • 
+
    • software_x11: The most used, using X11
      • 
+
    • gl_x11: Renders to an X11 window, except that it uses OpenGL
      • 
 
    
-
    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.
    
-
    If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version. 
     
+
    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.
    
+
    If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version.
    UI Rendering Mode
     
 
@@ -120,11 +120,12 @@ render scene;
 
    Figure: Immediate mode
    Immediate mode
     
 
-
    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.
     
+
    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.
    The following example explains the common usage of the immediate mode:
    -void update()
+void 
+update()
 {
    Image *img = load_image(NEW_IMG);
 
@@ -164,7 +165,8 @@ void update()
 
    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:
    
 
 
    -void create_image()
+void 
+create_image()
 {
    // Initialize an image object to be displayed on the screen
    Evas_Object *img = evas_object_image_add(e);
@@ -182,7 +184,8 @@ void create_image()
    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);
@@ -204,7 +207,8 @@ void create_rectangle()
 
    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.
    
 
 
    -void update()
+void 
+update()
 {
    // Set new image resource
    elm_image_file_set(img, NEW_IMG, NULL);
@@ -216,7 +220,7 @@ void update()
 
 
    Evas Rendering
    
 
-
    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.
    
+
    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.
    
 
 
    Figure: Evas rendering in the main loop
     
 
    Evas rendering in the main loop
     
@@ -250,7 +254,7 @@ void update()
 
    Figure: Evas redrawing example 5
     
 
    Evas redrawing example 5
    
 
-
    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.
    
+
    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.
    s
 
 
    
 
 
 
 
 
 
 
 
 
 
 
 
  
 
  
  
  
 
 
    
diff --git a/org.tizen.ui.practices/html/native/efl/form_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/form_tutorial_n.htm
index 7f346fc..b694e87 100644
--- a/org.tizen.ui.practices/html/native/efl/form_tutorial_n.htm
+++ b/org.tizen.ui.practices/html/native/efl/form_tutorial_n.htm
@@ -239,7 +239,7 @@ _genlist_content_get(void *data, Evas_Object *obj, const char *part)
     
-    
+   
    
     
    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 elm_genlist_homogeneous_set() 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.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 elm_genlist_homogeneous_set() 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. 
   
     
         
   
     
diff --git a/org.tizen.ui.practices/html/native/efl/genlist_tutorial_mn.htm b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_mn.htm
index e9b123a..2a048ae 100644
--- a/org.tizen.ui.practices/html/native/efl/genlist_tutorial_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_mn.htm
@@ -373,7 +373,7 @@ evas_object_smart_callback_add(app->list, "contracted",
                                _tree_item_contracted, NULL);
 
    
 
-
    The expand,request and contract,request callbacks do only one thing: decide whether the element is expanded or contracted. This is done by using the elm_genlist_item_expanded_set() function; if it changes the expansion status of the item, the next callback is called (either expanded or contracted, depending on whether it was an expand,request or contract,request event). The following examples show a minimal implementation of these callbacks.
    
+
    The expand,request and contract,request callbacks do only one thing: decide whether the element is expanded or contracted. This is done with the elm_genlist_item_expanded_set() function; if it changes the expansion status of the item, the next callback is called (either expanded or contracted, depending on whether it was an expand,request or contract,request event). The following examples show a minimal implementation of these callbacks.
    
 
     static void
 _tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
diff --git a/org.tizen.ui.practices/html/native/efl/genlist_tutorial_wn.htm b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_wn.htm
index 6560f47..23f472f 100644
--- a/org.tizen.ui.practices/html/native/efl/genlist_tutorial_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_wn.htm
@@ -287,7 +287,7 @@ _genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
 
    You can manage the item style and size:
     
 
 
      
-
    • Managing the item style:
+
    • Manage the item style.
 
      The number of parts that you can fill for an item depends on the item style that you select when creating the item class (Elm_Genlist_Item_Class struct) for the genlist:
      
 
       app->itc->item_style = "default";
@@ -295,10 +295,10 @@ app->itc->item_style = "default";
 
      For all available styles, see Genlist.
      
 
      You can customize the styles by modifying the themein 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.
      
 
      • 
-
    • Setting a homogeneous item size:
+
    • Set a homogeneous item size.
 
      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.
      
 
      The elm_genlist_homogeneous_set() 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.
      • 
-
    • Changing the item class after the item has been created:
+
    • Change the item class after the item has been created.
 
      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 elm_genlist_item_item_class_update() function:
      
 
      static void
 _tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
@@ -384,7 +384,7 @@ evas_object_smart_callback_add(app->list, "contracted",
                                _tree_item_contracted, NULL);
 
      
 
-
      The expand,request and contract,request callbacks do only one thing: decide whether the element is expanded or contracted. This is done by using the elm_genlist_item_expanded_set() function; if it changes the expansion status of the item, the next callback is called (either expanded or contracted, depending on whether it was an expand,request or contract,request event). The following examples show a minimal implementation of these callbacks.
      
+
      The expand,request and contract,request callbacks do only one thing: decide whether the element is expanded or contracted. This is done with the elm_genlist_item_expanded_set() function; if it changes the expansion status of the item, the next callback is called (either expanded or contracted, depending on whether it was an expand,request or contract,request event). The following examples show a minimal implementation of these callbacks.
      
 
       static void
 _tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
diff --git a/org.tizen.ui.practices/html/native/efl/layout_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/layout_tutorial_n.htm
index 775e358..0ac9723 100644
--- a/org.tizen.ui.practices/html/native/efl/layout_tutorial_n.htm
+++ b/org.tizen.ui.practices/html/native/efl/layout_tutorial_n.htm
@@ -390,7 +390,7 @@ main(int argc, char *argv[])
    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;
@@ -536,7 +536,7 @@ main(int argc, char *argv[])
    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;
diff --git a/org.tizen.ui.practices/html/native/efl/multipoint_touch_n.htm b/org.tizen.ui.practices/html/native/efl/multipoint_touch_n.htm
index f687db4..1a6547f 100644
--- a/org.tizen.ui.practices/html/native/efl/multipoint_touch_n.htm
+++ b/org.tizen.ui.practices/html/native/efl/multipoint_touch_n.htm
@@ -45,12 +45,13 @@
   
 
      This tutorial demonstrates how you can use the Evas_Object to paint on a canvas and track touch events.
      
 
- 
      Initializing Multi-point Touch
      
-
-
      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.
      
+
      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.
      
 
-
      Initialization is implemented in the multitouch.c file.
      
-
      The appdata structure includes Evas_Object pointers, a list, and a Boolean flag.
      
+ 
      Initializing Multi-point Touch
      
+
      To initialize multi-point touch for use:
      
+
        
+
      1. 
+
        Initialization is implemented in the multitouch.c file. The appdata structure includes Evas_Object pointers, a list, and a Boolean flag.
        
 
         typedef struct appdata 
 {
@@ -70,8 +71,9 @@ typedef struct appdata
 } 
 appdata_s;
 
        
-
-
        The main() function initializes event callbacks and calls the ui_app_main() function to start the EFL application.
        
+
        2. 
+
      2. 
+
        The main() function initializes the event callbacks and calls the ui_app_main() function to start the EFL application.
        
 
         int
 main(int argc, char *argv[])
@@ -101,17 +103,22 @@ main(int argc, char *argv[])
 }
 
        
 
-
 
        The following figure illustrates the Multi-point Touch.
        
 
   
        Figure: Multi-point Touch screens
         
   
        Multi-point Touch screens
         
+
        3. 
+
      
 
  
      Handling the Canvas
      
 
-
      The create_base_gui() 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.
       
+ 
      To handle the canvas:
      
+ 
        
+ 
      1. 
+
        The create_base_gui() 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.
         
 
-
        static void
+
        +static void
 create_base_gui(appdata_s *ad)
 {
    Elm_Object_Item *nf_it;
@@ -133,11 +140,13 @@ create_base_gui(appdata_s *ad)
    elm_object_item_part_content_set(nf_it, "title_right_btn", ad->button);
 } 
 
        
-
+
        2. 
+
      2. 
 
        The create_main_view() function creates the main view including the label and an event rectangle. 
         
-
        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.
         
+
        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.
         
 
-
        static Evas_Object *
+
        +static Evas_Object *
 create_main_view(appdata_s *ad)
 {
    Evas_Object *box;
@@ -168,10 +177,12 @@ create_main_view(appdata_s *ad)
    return box;
 }
 
        
-
+
        3. 
+
      3. 
 
        The create_spot() function creates a rectangle, resizes the rectangle according to received size input, and moves the rectangle according to received coordinates (x, y positions) input.
        
 
-
        Evas_Object *
+
        +Evas_Object *
 create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
 {
    Evas_Object *spot;
@@ -184,8 +195,9 @@ create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
    return spot;
 }
 
        
-
-
        The rectangle object is stored in Eina_List (ad->spots) for managing other functions. The button_clicked_cb() function removes all evas_objects into the ad->spots list, meaning all spot rectangles are cleared.
        
+
        4. 
+
      4. 
+
        The rectangle object is stored in Eina_List(ad->spots) for managing other functions. The button_clicked_cb() function removes all evas_objects into the ad->spots list, meaning all spot rectangles are cleared.
        
 
 
        static void
 button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
@@ -201,6 +213,8 @@ button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
    elm_object_text_set(ad->label, "Clear");
 }
 
        
+
        5. 
+
      
 
  
      Managing Touch Events
      
 
diff --git a/org.tizen.ui.practices/html/native/efl/popup_tutorial_wn.htm b/org.tizen.ui.practices/html/native/efl/popup_tutorial_wn.htm
index 89d6648..ac52a2a 100644
--- a/org.tizen.ui.practices/html/native/efl/popup_tutorial_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/popup_tutorial_wn.htm
@@ -183,7 +183,7 @@ evas_object_show(popup);
 
      To manage popup events:
      
 
 
         
-
      • Handle timeout events:
+
      • Handle timeout events.
 
        The timeout event is triggered whenever a popup is closed as a result of a timeout:
        
 
         static void 
@@ -195,7 +195,7 @@ elm_popup_timeout_set(popup, 3.0);
 evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
 
        • 
 
-
      • Handle block clicked events:
+
      • Handle block clicked events.
 
        The block,clicked event is triggered whenever the user taps on a blocked event area:
        
 
         static void 
diff --git a/org.tizen.ui.practices/html/native/efl/rotary_events_wn.htm b/org.tizen.ui.practices/html/native/efl/rotary_events_wn.htm
index 3608a56..61d737a 100644
--- a/org.tizen.ui.practices/html/native/efl/rotary_events_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/rotary_events_wn.htm
@@ -114,7 +114,7 @@ Eina_Bool _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev)
    }
    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;
diff --git a/org.tizen.ui.practices/html/native/efl/touch_gesture_n.htm b/org.tizen.ui.practices/html/native/efl/touch_gesture_n.htm
index b9981d3..654ed32 100644
--- a/org.tizen.ui.practices/html/native/efl/touch_gesture_n.htm
+++ b/org.tizen.ui.practices/html/native/efl/touch_gesture_n.htm
@@ -88,7 +88,7 @@ evas_object_show(r);
 
        You can configure some properties of the tap gestures:
        
 
 
        • 
-
          You can modify the timeout value for a long tap or double tap gesture.
          
+
          Modify the timeout value for a long tap or double tap gesture.
          
 
          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.
          
 
           // Get or set the gesture layer long tap start timeout of an object
@@ -383,7 +383,7 @@ momentum_abort(void *data, void *event_info)
 
          You can configure some properties of the line gestures:
          
 
 
          • 
-
            You can modify the minimum length and distance tolerance of a line.
            
+
            Modify the minimum length and distance tolerance of a line.
            
 
            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.
            
 
             // Get or set the gesture layer line min length of an object
@@ -397,7 +397,7 @@ Evas_Coord elm_gesture_layer_line_distance_tolerance_get(const Evas_Object *obj)
 
            • 
 
 
          • 
-
            You can enable the continue mode to allow the line, flick, zoom, and rotate gesture to restart. The default value is TRUE.
            
+
            Enable the continue mode to allow the line, flick, zoom, and rotate gesture to restart. The default value is TRUE.
            
 
            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.
            
 
             // Get or set the gesture layer continue mode of an object
@@ -495,15 +495,13 @@ line_abort(void *data, void *event_info)
 
 
            Implementing Flick Gestures
            
 
-
            You can configure some properties of the tap gestures:
            
-
            • You can modify the flick time limit of the flick gesture.
              
+
              You can modify the flick time limit of the flick gesture.
              
 
              The default value is defined in the system policy. In the Tizen SDK 2.4, it is 250 ms.
              
 
               // 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);
-
            
-
+
            
 
 
            The flick gesture states and the gesture info data structures are the same as in the line gesture.
            
 
@@ -530,9 +528,7 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS, ELM_GESTURE_STATE_ABORT,
 
 
            Implementing Zoom Gestures
            
 
-
            You can configure some properties of the zoom gestures:
            
-
-
            • You can modify various zoom values, such as zoom step and distance tolerance.
              
+
              You can modify various zoom values, such as zoom step and distance tolerance.
              
 
              The default values are defined in the system policy. In the Tizen SDK 2.4, they are:
              
 
                
 	
              • zoom_step: 0.0
                • 
@@ -557,13 +553,13 @@ double elm_gesture_layer_zoom_wheel_factor_get(const Evas_Object *obj);
 // 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);
-
        
+
        
 
 
        The zoom gesture states are the same as in the tap gesture.
        
 
 
        When using zoom gestures, pay attention to the following:
        
 
        • 
-
          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.
          • 
+
          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.
          
 
        • If the mouse wheel events are sent with the Ctrl key on the gesture layer, the zoom_start() callback function is called with the default zoom value (1) and the zoom value (zoom_finger_factor * zoom _wheel_factor) is increased or decreased on every step to follow the wheel up or down.
          • 
 
        • 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 zoom_distance_tolerance 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.
        
 
@@ -659,8 +655,6 @@ zoom_abort(void *data, void *event_info EINA_UNUSED)
 
 
        Implementing Rotate Gestures
        
 
-
        You can configure some properties of the rotate gestures:
        
-
        • 
 
          You can modify the rotate step and tolerance.
          
 
          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.
          
 
          @@ -671,7 +665,7 @@ double elm_gesture_layer_rotate_step_get(const Evas_Object *obj);
 // 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);
-
        
+
      
 
 
      The rotate gesture states are the same as in the tap gesture.
      
 
diff --git a/org.tizen.ui.practices/html/native/efl/ui_components_wn.htm b/org.tizen.ui.practices/html/native/efl/ui_components_wn.htm
index bc4ed3b..2948deb 100644
--- a/org.tizen.ui.practices/html/native/efl/ui_components_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/ui_components_wn.htm
@@ -175,7 +175,7 @@
 	
      Circle Object 
      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.
-	 
      Circular components can usually be added with the eext_circle_object_[component_name]_add() 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 eext_circle_object_item* 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.
      
+	 
      Circular components can usually be added with the eext_circle_object_[component_name]_add() 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 eext_circle_object_item* 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.
      
     
 	 
      Circle Progressbar 
diff --git a/org.tizen.ui.practices/html/web/tau/creating_animation_w.htm b/org.tizen.ui.practices/html/web/tau/creating_animation_w.htm
index 67d53d5..c35abc0 100644
--- a/org.tizen.ui.practices/html/web/tau/creating_animation_w.htm
+++ b/org.tizen.ui.practices/html/web/tau/creating_animation_w.htm
@@ -48,16 +48,17 @@
 
    
 
    tau.animation is the namespace of the TAU Animation. You can call TAU Animation functions through this namespace.
    
 
+
 
-                
-                
-                        
-                
-                
-                        
-                
-                
-        
    Note
    To get tau.animation.min.js library, please create new project with UIComponents sample and you can get this in lib/tau/animation directory.
    
+	
+		
+			Note
+		
+		
+			To get the tau.animation.min.js library, create a new project from the UIComponent sample. The library is included in the sample's lib/tau/animation directory.
+		
+	
+
 
 
 
    Creating TAU Animations