From 00a65defa98193dd532bd1084372d8735aab500d Mon Sep 17 00:00:00 2001 From: Donghyun Lee Date: Fri, 13 Nov 2015 13:44:03 +0900 Subject: [PATCH] LB reviewed and updates --- org.tizen.devtools/html/common_tools/emulator.htm | 2 +- .../html/common_tools/keyboard_shortcuts.htm | 2 +- .../html/native_tools/command_line_interface_n.htm | 237 ++-- .../html/native_tools/enventor_n.htm | 4 +- .../html/native_tools/manifest_elements_n.htm | 71 +- .../html/web_tools/command_line_interface_w.htm | 240 ++-- .../html/native/first_app/first_app_n.htm | 5 +- .../html/native/process/setting_properties_n.htm | 3 +- org.tizen.guides/html/native/app/appcontrol_n.htm | 27 +- .../html/native/app/common_appcontrol_n.htm | 119 +- org.tizen.guides/html/native/app/service_app_n.htm | 4 +- org.tizen.guides/html/native/network/nfc_n.htm | 2 +- .../html/images/accountmanager_add_mw.png | Bin 0 -> 23605 bytes .../html/images/accountmanager_edit_mw.png | Bin 0 -> 25352 bytes .../html/images/accountmanager_error_mw.png | Bin 0 -> 44551 bytes .../html/images/accountmanager_info_mw.png | Bin 0 -> 17182 bytes .../html/images/accountmanager_list_mw.png | Bin 0 -> 17049 bytes .../html/images/alarm_layout_sd.png | Bin 0 -> 11628 bytes .../html/images/alarm_main_view_sd.png | Bin 0 -> 3685 bytes .../html/images/alarm_on_time_sd.png | Bin 0 -> 15199 bytes .../html/images/alarm_recurring_sd.png | Bin 0 -> 15233 bytes .../html/images/appcalleecaller_mw.png | Bin 0 -> 104059 bytes org.tizen.sampledescriptions/html/images/badge.png | Bin 95867 -> 0 bytes .../html/images/badge_workflow_badge_update_sd.png | Bin 47508 -> 61861 bytes .../html/images/badge_workflow_startup_sd.png | Bin 16640 -> 28224 bytes .../html/images/copy_and_paste_widgets.png | Bin 55693 -> 17520 bytes .../html/images/demo3d_ww.png | Bin 0 -> 74248 bytes .../html/images/drag_and_drop_container_item.png | Bin 0 -> 24399 bytes .../html/images/drag_and_drop_dragging_sd.png | Bin 0 -> 54440 bytes .../html/images/drag_and_drop_favorites_sd.png | Bin 0 -> 53783 bytes .../html/images/drag_and_drop_main_view_sd.png | Bin 0 -> 39451 bytes .../html/images/drag_and_drop_modules.png | Bin 0 -> 23118 bytes .../html/images/drag_and_drop_popup_sd.png | Bin 0 -> 50043 bytes .../html/images/drag_and_drop_structure.png | Bin 0 -> 34681 bytes .../html/images/imf_main_view_sd.png | Bin 0 -> 6801 bytes .../html/images/imf_month_kbd_sd.png | Bin 0 -> 14118 bytes .../html/images/imf_normal_kbd_sd.png | Bin 0 -> 17162 bytes .../html/images/imf_numeric_kbd_sd.png | Bin 0 -> 13861 bytes .../html/images/imf_phonenumber_kbd_sd.png | Bin 0 -> 13980 bytes .../html/images/imf_widgets.png | Bin 0 -> 10723 bytes .../html/images/layout-transitions-screen-a.png | Bin 0 -> 4176 bytes .../html/images/layout-transitions-screen-b.png | Bin 0 -> 15190 bytes .../html/images/layout-transitions-screen-c.png | Bin 0 -> 4113 bytes .../html/images/layout-transitions-widget-tree.png | Bin 0 -> 10569 bytes .../html/images/metaldetector_error_ww.png | Bin 0 -> 6248 bytes .../html/images/metaldetector_ww.png | Bin 0 -> 31235 bytes .../html/images/newsfeed_mw_screen.png | Bin 0 -> 13088 bytes .../html/images/pathtracker_hand_mw.png | Bin 0 -> 715 bytes .../html/images/pathtracker_point_mw.png | Bin 0 -> 703 bytes .../html/images/pathtracker_set2_mw.png | Bin 0 -> 108568 bytes .../html/images/pathtracker_set_mw.png | Bin 0 -> 98480 bytes .../html/images/pathtracker_start_mw.png | Bin 0 -> 89220 bytes .../html/images/pathtracker_tracker_mw.png | Bin 0 -> 18064 bytes .../html/images/quickpanel_0.png | Bin 21088 -> 0 bytes .../html/images/quickpanel_1.png | Bin 109498 -> 0 bytes .../html/images/quickpanel_2.png | Bin 114019 -> 0 bytes .../html/images/quickpanel_3.png | Bin 54005 -> 0 bytes .../html/images/quickpanel_4.png | Bin 9657 -> 0 bytes org.tizen.sampledescriptions/html/index.htm | 12 + .../html/mobile_n/alarm_sd_mn.htm | 370 ++++++ .../html/mobile_n/badge_sd.htm | 1122 ------------------ .../html/mobile_n/badge_sd_mn.htm | 1193 ++++++++++++++++++++ .../html/mobile_n/bluetoothchat_sd_mn.htm | 4 +- .../html/mobile_n/cairo_basic_sd_mn.htm | 2 +- .../html/mobile_n/cairo_evasgl_sd_mn.htm | 2 +- .../html/mobile_n/copy_and_paste_sd.htm | 243 ---- .../html/mobile_n/copy_and_paste_sd_mn.htm | 221 ++++ .../html/mobile_n/drag_and_drop_sd_mn.htm | 532 +++++++++ .../html/mobile_n/file_manager_sd_mn.htm | 28 +- .../html/mobile_n/imf_sd_mn.htm | 320 ++++++ .../html/mobile_n/layout_transitions_sd_mn.htm | 597 ++++++++++ .../html/mobile_n/lockscreen_sd_mn.htm | 2 +- .../html/mobile_n/oauth2_sd_mn.htm | 2 +- .../html/mobile_n/sd_mn.htm | 30 +- .../html/mobile_w/accountmanager_mw.htm | 439 +++++++ .../html/mobile_w/appcalleecaller_mw.htm | 168 +++ .../html/mobile_w/newsfeed_mw.htm | 131 +++ .../html/mobile_w/pathtracker_mw.htm | 548 +++++++++ .../html/mobile_w/sd_mw.htm | 30 + .../html/wearable_w/appcalleecaller_ww.htm | 2 +- .../html/wearable_w/demo3d_ww.htm | 580 ++++++++++ .../html/wearable_w/metaldetector_ww.htm | 364 ++++++ .../html/wearable_w/sd_ww.htm | 16 + org.tizen.sampledescriptions/index.xml | 12 + .../html/native/account/account_tutorial_n.htm | 2 +- .../app_framework/app_manager_tutorial_n.htm | 5 +- .../html/native/messaging/push_tutorial_n.htm | 343 +++--- .../native/multimedia/multimedia_tutorials_n.htm | 16 +- .../html/native/multimedia/recorder_tutorial_n.htm | 906 ++++++++------- .../multimedia/screen_mirroring_tutorial_n.htm | 200 ++-- .../native/multimedia/sound_manager_tutorial_n.htm | 487 ++++---- .../multimedia/thumbnail_util_tutorial_n.htm | 142 ++- .../native/multimedia/tone_player_tutorial_n.htm | 98 +- .../native/multimedia/video_util_tutorial_n.htm | 375 +++--- .../native/multimedia/wav_player_tutorial_n.htm | 69 +- .../html/native/network/bluetooth_tutorial_n.htm | 313 ++--- .../html/native/network/connection_tutorial_n.htm | 208 ++-- .../html/native/network/nfc_tutorial_n.htm | 433 +++---- .../html/native/network/smartcard_tutorial_n.htm | 11 +- .../html/native/network/wifi_direct_tutorial_n.htm | 124 +- .../html/native/network/wifi_tutorial_n.htm | 64 +- .../html/native/social/calendar_tutorial_n.htm | 2 + .../html/native/system/runtime_tutorial_n.htm | 18 +- .../web/tizen/input_output/archive_tutorial_w.htm | 1 + .../html/web/w3c/security/cors_tutorial_w.htm | 10 +- .../html/native/dali/dali_overview_n.htm | 15 +- .../html/native/dali/event_handling_n.htm | 18 +- .../html/native/efl/component_background_mn.htm | 20 +- .../html/native/efl/component_button_mn.htm | 51 +- .../html/native/efl/component_button_wn.htm | 52 +- .../html/native/efl/component_calendar_mn.htm | 14 +- .../html/native/efl/component_check_mn.htm | 47 +- .../html/native/efl/component_check_wn.htm | 47 +- .../html/native/efl/component_circ_datetime_wn.htm | 11 +- .../html/native/efl/component_circ_genlist_wn.htm | 27 +- .../html/native/efl/component_circ_object_wn.htm | 147 ++- .../html/native/efl/component_circ_option_wn.htm | 6 +- .../html/native/efl/component_colorselector_mn.htm | 21 +- .../html/native/efl/component_ctxpopup_mn.htm | 50 +- .../html/native/efl/component_ctxpopup_wn.htm | 46 +- .../html/native/efl/component_datetime_mn.htm | 35 +- .../html/native/efl/component_datetime_wn.htm | 29 +- .../html/native/efl/component_entry_mn.htm | 110 +- .../html/native/efl/component_entry_wn.htm | 128 ++- .../html/native/efl/component_flip_mn.htm | 49 +- .../html/native/efl/component_flipselector_mn.htm | 14 +- .../html/native/efl/component_gengrid_mn.htm | 42 +- .../html/native/efl/component_genlist_mn.htm | 89 +- .../html/native/efl/component_genlist_wn.htm | 97 +- .../html/native/efl/component_glview_mn.htm | 38 +- .../html/native/efl/component_glview_wn.htm | 41 +- .../html/native/efl/component_hoversel_mn.htm | 8 +- .../html/native/efl/component_icon_mn.htm | 22 +- .../html/native/efl/component_icon_wn.htm | 18 +- .../html/native/efl/component_image_mn.htm | 43 +- .../html/native/efl/component_image_wn.htm | 36 +- .../html/native/efl/component_index_mn.htm | 55 +- .../html/native/efl/component_index_wn.htm | 37 +- .../html/native/efl/component_label_mn.htm | 26 +- .../html/native/efl/component_label_wn.htm | 27 +- .../html/native/efl/component_list_mn.htm | 60 +- .../html/native/efl/component_list_wn.htm | 59 +- .../html/native/efl/component_map_mn.htm | 85 +- .../html/native/efl/component_notify_mn.htm | 23 +- .../html/native/efl/component_notify_wn.htm | 24 +- .../html/native/efl/component_panel_mn.htm | 42 +- .../html/native/efl/component_photocam_mn.htm | 41 +- .../html/native/efl/component_plug_mn.htm | 17 +- .../html/native/efl/component_popup_mn.htm | 46 +- .../html/native/efl/component_popup_wn.htm | 88 +- .../html/native/efl/component_progressbar_mn.htm | 60 +- .../html/native/efl/component_progressbar_wn.htm | 82 +- .../html/native/efl/component_radio_mn.htm | 32 +- .../html/native/efl/component_radio_wn.htm | 55 +- .../native/efl/component_segmentcontrol_mn.htm | 40 +- .../html/native/efl/component_slider_mn.htm | 44 +- .../html/native/efl/component_slider_wn.htm | 40 +- .../html/native/efl/component_spinner_mn.htm | 55 +- .../html/native/efl/component_toolbar_mn.htm | 23 +- .../html/native/efl/component_tooltip_mn.htm | 17 +- .../html/native/efl/component_win_mn.htm | 22 +- .../html/native/efl/component_win_wn.htm | 19 +- .../html/native/efl/container_box_n.htm | 22 +- .../html/native/efl/container_grid_n.htm | 6 +- .../html/native/efl/container_layout_n.htm | 8 +- .../html/native/efl/container_mapbuf_n.htm | 2 +- .../html/native/efl/container_naviframe_n.htm | 4 +- .../html/native/efl/container_panes_mn.htm | 4 +- .../html/native/efl/container_scroller_n.htm | 35 +- .../html/native/efl/container_table_n.htm | 5 +- .../html/native/efl/evas_basic_objects_n.htm | 1 + .../html/native/efl/form_tutorial_n.htm | 1 + .../html/native/efl/notification_window_n.htm | 3 + .../html/native/efl/ui_components_wn.htm | 2 +- .../html/web/tau/creating_animation_w.htm | 2 +- org.tizen.ui.practices/html/web/tau/notepad_w.htm | 1 + 176 files changed, 9684 insertions(+), 4415 deletions(-) create mode 100644 org.tizen.sampledescriptions/html/images/accountmanager_add_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/accountmanager_edit_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/accountmanager_error_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/accountmanager_info_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/accountmanager_list_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/alarm_layout_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/alarm_main_view_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/alarm_on_time_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/alarm_recurring_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/appcalleecaller_mw.png delete mode 100755 org.tizen.sampledescriptions/html/images/badge.png create mode 100644 org.tizen.sampledescriptions/html/images/demo3d_ww.png create mode 100644 org.tizen.sampledescriptions/html/images/drag_and_drop_container_item.png create mode 100644 org.tizen.sampledescriptions/html/images/drag_and_drop_dragging_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/drag_and_drop_favorites_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/drag_and_drop_main_view_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/drag_and_drop_modules.png create mode 100644 org.tizen.sampledescriptions/html/images/drag_and_drop_popup_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/drag_and_drop_structure.png create mode 100644 org.tizen.sampledescriptions/html/images/imf_main_view_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/imf_month_kbd_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/imf_normal_kbd_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/imf_numeric_kbd_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/imf_phonenumber_kbd_sd.png create mode 100644 org.tizen.sampledescriptions/html/images/imf_widgets.png create mode 100644 org.tizen.sampledescriptions/html/images/layout-transitions-screen-a.png create mode 100644 org.tizen.sampledescriptions/html/images/layout-transitions-screen-b.png create mode 100644 org.tizen.sampledescriptions/html/images/layout-transitions-screen-c.png create mode 100644 org.tizen.sampledescriptions/html/images/layout-transitions-widget-tree.png create mode 100644 org.tizen.sampledescriptions/html/images/metaldetector_error_ww.png create mode 100644 org.tizen.sampledescriptions/html/images/metaldetector_ww.png create mode 100644 org.tizen.sampledescriptions/html/images/newsfeed_mw_screen.png create mode 100644 org.tizen.sampledescriptions/html/images/pathtracker_hand_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/pathtracker_point_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/pathtracker_set2_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/pathtracker_set_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/pathtracker_start_mw.png create mode 100644 org.tizen.sampledescriptions/html/images/pathtracker_tracker_mw.png delete mode 100644 org.tizen.sampledescriptions/html/images/quickpanel_0.png delete mode 100644 org.tizen.sampledescriptions/html/images/quickpanel_1.png delete mode 100644 org.tizen.sampledescriptions/html/images/quickpanel_2.png delete mode 100644 org.tizen.sampledescriptions/html/images/quickpanel_3.png delete mode 100644 org.tizen.sampledescriptions/html/images/quickpanel_4.png create mode 100644 org.tizen.sampledescriptions/html/mobile_n/alarm_sd_mn.htm delete mode 100644 org.tizen.sampledescriptions/html/mobile_n/badge_sd.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_n/badge_sd_mn.htm delete mode 100644 org.tizen.sampledescriptions/html/mobile_n/copy_and_paste_sd.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_n/copy_and_paste_sd_mn.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_n/drag_and_drop_sd_mn.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_n/imf_sd_mn.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_n/layout_transitions_sd_mn.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_w/accountmanager_mw.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_w/appcalleecaller_mw.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_w/newsfeed_mw.htm create mode 100644 org.tizen.sampledescriptions/html/mobile_w/pathtracker_mw.htm create mode 100644 org.tizen.sampledescriptions/html/wearable_w/demo3d_ww.htm create mode 100644 org.tizen.sampledescriptions/html/wearable_w/metaldetector_ww.htm diff --git a/org.tizen.devtools/html/common_tools/emulator.htm b/org.tizen.devtools/html/common_tools/emulator.htm index f73beca..d50b8ec 100644 --- a/org.tizen.devtools/html/common_tools/emulator.htm +++ b/org.tizen.devtools/html/common_tools/emulator.htm @@ -828,7 +828,7 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo qmp qmp <qmp command> - Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require { "execute": "qmp_capabilities" } to be in the control mode. + Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require {"execute": "qmp_capabilities"} to be in the control mode.

In the shell mode, the shell does not support the double quotation mark (") as an argument. For the JSON arguments, use \" (back space + double quotation mark) instead.

diff --git a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm index 7b326c6..e72ecd6 100644 --- a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm +++ b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm @@ -1240,7 +1240,7 @@

F5

-

Show or hide the tool bar

+

Show or hide the toolbar

ubuntu

F9

diff --git a/org.tizen.devtools/html/native_tools/command_line_interface_n.htm b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm index 2fe91f2..7637e6f 100644 --- a/org.tizen.devtools/html/native_tools/command_line_interface_n.htm +++ b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm @@ -58,15 +58,15 @@ export PATH=$PATH:$<TIZEN_SDK_HOME>/tools/ide/bin -

The following are available CLI commands:

+

The following tables list the available CLI commands.

- - +
+ - + - - + +
tizen cli-configtizen cli-config

Displays, sets, replaces, and remove CLI settings. +

Displays, sets, replaces, and removes CLI settings.

The key and the name are separated by an equal sign.

The CLI configuration keys are:

    @@ -81,13 +81,13 @@ Sets the path to the p
  • default.sdb.timeout=<timeout value>

    Sets the default connection timeout value. The default is 60000 milliseconds.

-

Syntax: +

Syntax:

       tizen cli-config [-g <key>=<value>]
   tizen cli-config -l
-
    -
-

+ + +

Options:

  • -g <key>=<value>, --global <key>=<value>: @@ -96,6 +96,7 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

    Displays the list of all CLI configuration keys and values.

Examples:

+

  • Sets a profile.xml path globally:

    @@ -115,26 +116,21 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
    • -
-
- + - - + - + - +
tizen listtizen list

Displays the profile templates and the list corresponding with the given sub-command.

-

Syntax: -

    -
    +

Displays the profile templates in a list corresponding to the given sub-command.

+

Syntax:

+
       tizen list native-project
-
    -
-

-

Options:

+

Examples:

    @@ -160,19 +156,17 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
tizen createtizen create

Creates a Tizen native project.

-

Syntax: -

    -
    +
    Syntax:
     
+
         tizen create native-project [-p <profile name>] [-t <predefined template>] 
-                             [-n <project name>] [-- <project location>]
-
      
-
    
-
     
+                              [-n <project name>] [-- <project location>]
+
+

Options:

  • -p, --profile: @@ -185,6 +179,7 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

    Specifies the destination directory where the project is created.

Examples:

+

  • Creates the template project based on the basic Tizen mobile UI project:

    @@ -203,20 +198,18 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
tizen build-nativetizen build-native

Builds the Tizen native project with the default values (if you do not set the options).

There are 3 options: architecture, compiler, and configuration. All options are required and the default values are described in the CLI configuration file.

-

Syntax: -

    -
    +
    Syntax:
     
+
         tizen build-native [-a {x86|arm}] [-c {gcc|llvm}] 
                      [-C {Debug|Release}] [--]
-
      
-
    
-
     
+
+

Options:

  • -a, --arch: @@ -262,19 +255,14 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
tizen cleantizen clean

Cleans the Tizen native project.

- -

Syntax: -

    -
    +
    Syntax:
     
+
         tizen clean [--]
-
      
-
    
-
     
-
    Options:
    
+

Examples:

    @@ -285,9 +273,7 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

    Or for Windows:

       > tizen.bat clean -- C:\Users\workspace\basic
-
    - -
+
@@ -295,23 +281,22 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

-tizen certificate +tizen certificate

Generates a Tizen certificate for your application.

-

If you want to upload your application to the Tizen store or install the application to a Tizen device, you must generate your Tizen certificate.

+

If you want to upload your application to the Tizen store or install the application to a Tizen device, you must generate a Tizen certificate.

-

Syntax: -

+

Options:

+ - + - +
tizen security-profilestizen security-profiles
@@ -369,9 +356,8 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

remove: Removes the specified security profile.

-

Syntax: -

    -
      tizen security-profiles add [-n <security profile name>]
+
    Syntax:
     
+
        tizen security-profiles add [-n <security profile name>]
                               [-a <author certificate path>]
                               [-p <author password>]
                               [-c <author CA certificate path>]
@@ -382,14 +368,14 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
      
-
        tizen security-profiles list [-n <security profile name>] [--]
      
-
        tizen security-profiles remove [-n <security profile name>] [--]
      
-
    
-
     
+
      tizen security-profiles list [-n <security profile name>] [--]
    
+
      tizen security-profiles remove [-n <security profile name>] [--]
+

Options:

+
    -
  • -n, --name:

    Specifies the name of the security profile to add, remove, and display. -

    When you type tizen security-profiles list without a name argument, a set of the security-profile names in the 'profiles.xml' is displayed.

    • +
  • -n, --name:

    Specifies the name of the security profile to add, remove, or display.

    +

    When you enter tizen security-profiles list without a name argument, a set of the security profile names in the profiles.xml file is displayed.

  • -a, --path:

    Specifies the directory path where the author certificate file is located. The format of the certificate is PKCS#12, and the file extension is .p12.

  • -p, --password:

    Specifies the password used to access the author certificate.

  • -c, --ca:

    Specifies the directory path where the author CA certificate file is located. The file extension of the CA certificate is .cer.

    • @@ -398,9 +384,10 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

    -dp, --dist-password:

    Specifies the password of the distributor certificate.

  • -dc, --dist-ca:

    Specifies the directory path where the distributor CA certificate file is located.

  • -dr, --dist-rootca:

    Specifies the directory path where the distributor Root CA certificate file is located.

    • -
  • --:

    Specifies the directory path where profiles.xml is located.

    If you skip this option, the value of the default.profiles.path key in the CLI configuration is used on finding the profiles.xml file which consists of new security profiles that are generated in <TIZEN_SDK_DATA>/keystore/, and the directory path is added to the CLI configuration.

    • +
  • --:

    Specifies the directory path where profiles.xml is located.

    If you skip this option, the value of the default.profiles.path key in the CLI configuration is used to find the profiles.xml file, which consists of new security profiles that are generated in <TIZEN_SDK_DATA>/keystore/. The directory path is added to the CLI configuration.

Examples:

+

  • Adds a new security profile:

    @@ -417,7 +404,9 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
    
 
    Or for Windows:
    
-
      > tizen.bat security-profiles add -n MyProfile -a C:\tizen-sdk-data\keystore\author\mycert.p12 -p 1234
    
+
    +  > tizen.bat security-profiles add -n MyProfile -a C:\tizen-sdk-data\keystore\author\mycert.p12 -p 1234
+

  • Displays the security profiles:

    @@ -440,9 +429,11 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
    
 
    Or for Windows:
    
-
      > tizen.bat security-profiles list
+
    +  > tizen.bat security-profiles list
 
-  > tizen.bat security-profiles list -n MyProfile
    
+  > tizen.bat security-profiles list -n MyProfile
+

  • Removes the security profile:

    @@ -452,29 +443,30 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
    
 
    Or for Windows:
    
-
      > tizen.bat security-profiles remove -n MyProfile
    
+
    +  > tizen.bat security-profiles remove -n MyProfile
+
+ - +
tizen packagetizen package

Packages the Tizen application with signing. If there is a package file path in the options, the package is re-signed.

The Tizen application is signed with a certified profile named profiles.xml. You can create the default profile from the Tizen IDE, which generates the file in a hidden directory in your workspace (<Your workspace directory>/.metadata/.plugins/org.tizen.common.sign/profiles.xml). Set the path of the profile.xml file once before packaging the Tizen application (you can use the tizen cli-config command).

-

Syntax: -

    -
    +
    Syntax:
     
+
+
         tizen package [-t {tpk|wgt}] [-s <security profile name>] [-S {on|off}] [--]
-
      
-
    
-
     
+

Options:

  • -t, --type: @@ -485,8 +477,10 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

    Determines whether to strip the native binary.

    The default value is off. This option only works when the native binary is based on the arm architecture and release build configuration.

  • --: -

    Specifies the build output path or package file path, which is contained in a file name, for re-signing packaging.

    • +

    Specifies the build output path or package file path, which is contained in a file name, for re-signing the package.

    +
+

Examples:

  • Sets up the path of the profile.xml file that you already have:

    @@ -533,21 +527,20 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

+ - +
tizen installtizen install

Installs a Tizen application on the target.

-

Syntax: -

    -
    +
    Syntax:
    
+ 
+
         tizen install [-t <target name>] [-n <package name>] [--]
-
      
-
    
-
     
+

Options:

  • -t, --target: @@ -572,21 +565,21 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

+ - +
tizen uninstalltizen uninstall

Uninstalls the Tizen application on the target.

-

Syntax: -

    -
    +
    Syntax:
     
+
+
         tizen uninstall [-t <target name>] [-p <package id>]
-
      
-
    
-
     
+
+

Options:

  • -t, --target: @@ -600,7 +593,6 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

      $ tizen uninstall -–target emulator-26101 -–pkgid org.tizen.basic
-
@@ -608,18 +600,16 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

-tizen run +tizen run

Runs the Tizen application on the target.

-

Syntax: -

Options:

- @@ -641,26 +630,24 @@ Sets the default connection timeout value. The default is 60000 milliseconds.

-tizen version +tizen version

Displays the CLI version number.

-

Syntax: -

+

Examples:

+ - diff --git a/org.tizen.devtools/html/native_tools/enventor_n.htm b/org.tizen.devtools/html/native_tools/enventor_n.htm index 892fded..93da29f 100644 --- a/org.tizen.devtools/html/native_tools/enventor_n.htm +++ b/org.tizen.devtools/html/native_tools/enventor_n.htm @@ -81,7 +81,7 @@

The following figure illustrates the layout. In the figure:

+ +

Handling GATT Operation Preconditions

-

Precondition to use the GATT operations

-

There is an essential precondition for use GATT APIs. To use those, you need to connect BLE target you want successfully.

-

This is the process to connect BLE target below.

+

Before you can use the GATT APIs, you must successfully connect to the BLE target.

+

To connect to the BLE target:

 int ret = BT_ERROR_NONE;
+// For information on the callback, see Managing Bluetooth LE Scans
 ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
-/* If you want to know the cb function, you can refer to the list, "Managing Bluetooth LE Scans" */
-if (ret != BT_ERROR_NONE) {
-	dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] Failed.");
+if (ret != BT_ERROR_NONE) 
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] Failed.");
 }
-/* You should wait while searching LE target you want to connect */
+// Wait while the system searches for the LE target you want to connect to
+// If you find the LE target you want, stop the scan
 ret = bt_adapter_le_stop_scan();
-/* If you find LE target you want, you should stop finding LE target */
+
 ret = bt_gatt_connect(ADDRESS_BLE_DEVICE_YOU_WANT, false);
-if (ret != BT_ERROR_NONE) {
-	dlog_print(DLOG_ERROR, LOG_TAG, "Fail to connect LE device.");
+if (ret != BT_ERROR_NONE) 
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "Failed to connect LE device.");
 }
-
+ -

Managing the Client Operations

+

Managing the GATT Client Operations

To perform GATT client operations:

  1. Register a callback for connection state changes: @@ -852,7 +889,7 @@ __bt_gatt_connection_state_changed_cb(int result, bool connected, ret = bt_gatt_set_connection_state_changed_cb(__bt_gatt_connection_state_changed_cb, NULL);
    2. -
  2. Create a client to connect to the remote service device: +
  3. Create a client to connect to a remote service device: 
     int ret = 0;
 
@@ -864,25 +901,6 @@ return;
    4. -
  4. Unregister the callback registered for connection state changes: -
    -int ret = 0;
-// Unregister for GATT connection callback
-ret = bt_gatt_unset_connection_state_changed_cb();
-
    5. - -
  5. Destroy the client created to connect to the remote service device: -
    -int ret = 0;
-
-ret = bt_gatt_client_destroy(client);
-if (ret == BT_ERROR_NONE)
-   dlog_print(DLOG_INFO, LOG_TAG, "Success");
-
-return;
-
    -
    6. -
  6. Get the address of the remote device: 
     int ret = 0;
@@ -1222,9 +1240,7 @@ __bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len, void *use
    return;
 }
    -
    7. - -
  7. Unregister the callback for characteristic value changes. Afterwards, you are not notified of the value changes. +

    When you no longer need the value change notifications, unregister the callback.

     char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; // Battery service
@@ -1258,22 +1274,27 @@ if (ret != BT_ERROR_NONE)
    8. -
  8. When you no longer need the client, disconnect from the remote service and destroy the client: +
  9. When you no longer need the client, unregister the connection state change callback, disconnect from the remote service, and destroy the client: 
     int ret = 0;
 
+// Unregister the GATT connection callback
+ret = bt_gatt_unset_connection_state_changed_cb();
+
+// Destroy the client
 ret = bt_gatt_client_destroy(client);
 if (ret == BT_ERROR_NONE)
    dlog_print(DLOG_INFO, LOG_TAG, "Success");
 client = NULL;
 
 return;
-
    10. + +
-

Managing Common Getter Operations

+

Managing Common GATT Getter Operations

To perform getter operations for client-related information:

-

Managing Common Setter Operations

+

Managing Common GATT Setter Operations

-

The setter operations are common for the client role.

-

To set the properties and values of attributes:

-
    +

    To set the client properties and attribute values:

    +
+

Exchanging Data Using OPP

@@ -1601,11 +1621,12 @@ main()

The OPP is a basic profile for sending objects, such as pictures, virtual business cards, or schedules. The sender, which is a client, always initiates the transactions (called "push"), not the receiver, which is a server.

To exchange data with Object Push Profile (OPP):

+

Follow-up

+

Once we have learned the basics of the Smartcard API, we can now move on to more advanced tasks, including:

+ @@ -81,9 +85,8 @@ if (ret == SMARTCARD_ERROR_NONE) else    dlog_print(DLOG_INFO, LOG_TAG, "smartcard initialize failed"); -

The service is no longer needed, deinitialize it:

+

When the service is no longer needed, deinitialize it:

-int ret;
 ret = smartcard_deinitialize();
 
 if (ret == SMARTCARD_ERROR_NONE)
@@ -142,7 +145,6 @@ else
 
  • Before establishing a session, use the smartcard_reader_is_secure_element_present() function to make sure that the SE is present in the reader:
    
 
 
    -int ret;
 bool is_present = false;
 
 ret = smartcard_reader_is_secure_element_present(reader, &is_present);
@@ -160,9 +162,8 @@ else
 
 
 
  • Open  a session to connect to the SE in the reader using the smartcard_reader_open_session() function.
    
-
    When you no longer need the session, use the smartcard_reader_close_sessions() function to close all sessions opened on the specific reader.
    
+
    When you no longer need the reader, use the smartcard_reader_close_sessions() function to close all sessions opened on the specific reader.
    
 
    -int ret;
 int session;
 ret = smartcard_reader_open_session(reader, &session);
 
diff --git a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
index 72d43f7..aca754d 100644
--- a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
@@ -63,7 +63,7 @@
 			
  • Connecting to a Specific Wi-Fi Direct™ Peer Device
 			
    Connect to a specific Wi-Fi Direct™ peer device.
    • 			
 			
  • Managing Wi-Fi Direct™ Groups
-			
    Create a Wi-Fi Direct™ group, and manage group members and information.
    • 
+			
    Create a Wi-Fi Direct™ group and make your device the group owner.
    • 
 			
    • 		
 			
  • Deactivating Wi-Fi Direct™
 			
    Deactivate the Wi-Fi Direct™ local device asynchronously.
    • 
@@ -87,68 +87,57 @@ int error_code;
 
 error_code = wifi_direct_initialize();
    - -

    When Wi-Fi Direct™ is no longer needed (or application is exiting), release it:

    - -
    -wifi_direct_deinitialize();
-
    +

  • To get the Wi-Fi Direct™ activation and deactivation events, set up the wifi_direct_device_state_changed_cb() callback:

    -int error_code;
-void device_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_device_state_e device_state, void *user_data);
+void 
+device_state_changed_cb(wifi_direct_error_e error_code, 
+                        wifi_direct_device_state_e device_state, 
+                        void *user_data);
 
 error_code = wifi_direct_set_device_state_changed_cb(device_state_changed_cb, NULL);
    - -

    When this callback is no longer needed or the application is exiting, unset it:

    -
    -wifi_direct_unset_device_state_changed_cb(NULL);
-
    • +

  • To get the Wi-Fi Direct™ discovery events, set up the wifi_direct_discovery_state_changed_cb() callback:

    -int error_code;
-void discovery_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_discovery_state_e discovery_state, void *user_data);
+void 
+discovery_state_changed_cb(wifi_direct_error_e error_code,
+                           wifi_direct_discovery_state_e discovery_state, 
+                           void *user_data);
 
 error_code = wifi_direct_set_discovery_state_changed_cb (discovery_state_changed_cb, NULL);
    - -

    When this callback is no longer needed or the application is exiting, unset it:

    - -
    -wifi_direct_unset_discovery_state_changed_cb(NULL);
-
    • +

  • To get Wi-Fi Direct™ connection events, set up the wifi_direct_connection_state_changed_cb() callback:

    -int error_code;
-void connection_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_connection_state_e connection_state, void *user_data);
+void 
+connection_state_changed_cb(wifi_direct_error_e error_code, 
+                            wifi_direct_connection_state_e connection_state, 
+                            void *user_data);
 
 error_code = wifi_direct_set_connection_state_changed_cb(connection_state_changed_cb, NULL);
    - -

    When this callback is no longer needed or the application is exiting, unset it:

    - -
    -wifi_direct_unset_connection_state_changed_cb(NULL);
-
    • +

    Activating Wi-Fi Direct™

    -

    To activate and deactivate a Wi-Fi Direct™ local device and to check the Wi-Fi Direct™ local device state:

    +

    To activate a Wi-Fi Direct™ local device and to check the Wi-Fi Direct™ local device state:

    1. Activate a Wi-Fi Direct™ local device -

      Define the device_state_changed_cb() callback function. When a Wi-Fi Direct™ local device activates or deactivates, an information message is printed in the console (or you can show it to the user some other way).

      +

      Define the device_state_changed_cb() callback function, which is invoked whenever a Wi-Fi Direct™ local device activates or deactivates. In the following example, an information message is printed in the console.

       static void 
-device_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_discovery_state_e discovery_state, void *user_data)
+device_state_changed_cb(wifi_direct_error_e error_code, 
+                        wifi_direct_discovery_state_e discovery_state, 
+                        void *user_data)
 {
    if (device_state == WIFI_DIRECT_DEVICE_STATE_ACTIVATED) 
    {
@@ -163,7 +152,8 @@ device_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_discovery_st
 }
      2. -

    2. Switch on the Wi-Fi Direct™ local device with the wifi_direct_activate() function. After the wifi_direct_activate() function is completed, the wifi_direct_device_state_changed_cb() callback is called, if you set it before.

      +

    3. Switch on the Wi-Fi Direct™ local device with the wifi_direct_activate() function.

      +

      After the wifi_direct_activate() function is completed, the wifi_direct_device_state_changed_cb() callback is invoked.

       error_code = wifi_activate(NULL);
@@ -182,26 +172,31 @@ printf("Wi-Fi Direct™ state: %d.\n", state);
 
 
      To discover nearby Wi-Fi Direct™ peer devices, and after discovering, to print the results of the discovery, such as Wi-Fi Direct™ peer device information:
      
 
-
      1. Define a callback function for the discovery, to be called when the discovery state is changed.
-
        In this tutorial, the example callback is discovery_state_changed_cb().
        
+
        1. Define a callback function for the discovery, to be called when the discovery state is changed:
 
 
           void 
-discovery_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_discovery_state_e discovery_state, void *user_data)
+discovery_state_changed_cb(wifi_direct_error_e error_code, 
+                           wifi_direct_discovery_state_e discovery_state, 
+                           void *user_data)
 {
    switch (discovery_state) 
    {
       case WIFI_DIRECT_ONLY_LISTEN_STARTED:
          // Handle the event
+
          return "DISCOVERY_STATE: ONLY_LISTEN_STARTED";
       case WIFI_DIRECT_DISCOVERY_STARTED:
          // Handle the event
+
          return "DISCOVERY_STATE: DISCOVERY_STARTED";
       case WIFI_DIRECT_DISCOVERY_FOUND:
          // Handle the event
+
          return "DISCOVERY_STATE: DISCOVERY_FOUND";
       case WIFI_DIRECT_DISCOVERY_FINISHED:
          // Handle the event
+
          return "DISCOVERY_STATE: DISCOVERY_FINISHED";
       default:
          return "UNKNOWN_DISCOVERY_STATE";
@@ -211,7 +206,7 @@ discovery_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_discovery
 }
 
          2. 
 
-
        2. Start the discovery to scan nearby devices.
+
        3. Start the discovery by scanning for nearby devices.
 
          When the Wi-Fi Direct™ discovery state changes, the wifi_direct_discovery_state_changed_cb() function is called.
          
 
 
          @@ -220,7 +215,7 @@ wifi_direct_start_discovery(false, 0);
 
 
        4. Show the search results.
 
-
          Show the discovery result using the wifi_direct_discovered_peer_cb() callback, which is invoked by the wifi_direct_foreach_discovered_peers() function. In this tutorial, the Wi-Fi Direct™ peer device information is printed.
          
+
          Show the discovery result using the wifi_direct_discovered_peer_cb() callback, which is invoked by the wifi_direct_foreach_discovered_peers() function. In the following example, the Wi-Fi Direct™ peer device information is printed.
          
 
 
           bool 
@@ -239,6 +234,7 @@ discovered_peer_cb(wifi_direct_discovered_peer_info_s *peer, void *user_data)
       return false;
    }
 }
+
 int rv = wifi_direct_foreach_discovered_peers(discovered_peer_cb, NULL);
 
          
 
@@ -250,13 +246,16 @@ int rv = wifi_direct_foreach_discovered_peers(discovered_peer_cb, NULL);
 
 
          1. Define the callback function for the connection state.
 
-
            The connection event received from the Wi-Fi Direct™ framework invokes the wifi_direct_connection_state_changed_cb() callback function. This example defines the connection_state_changed_cb() callback to handle all Wi-Fi Direct™ connection events.
            
+
            The connection event received from the Wi-Fi Direct™ framework invokes a callback. The following example defines a connection_state_changed_cb() callback to handle all Wi-Fi Direct™ connection events.
            
 
 
             static void 
-connection_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_connection_state_e connection_state, const char *mac_address, void *user_data) 
+connection_state_changed_cb(wifi_direct_error_e error_code, 
+                            wifi_direct_connection_state_e connection_state, 
+                            const char *mac_address, void *user_data) 
 {
-   printf("Connection state changed to: [%d] [%s]\n", connection_state, test_wfd_convert_connection_state_to_string(connection_state));
+   printf("Connection state changed to: [%d] [%s]\n", connection_state, 
+          test_wfd_convert_connection_state_to_string(connection_state));
 
    bool accept_connection = false;
    int rv = 0;
@@ -290,7 +289,6 @@ connection_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_connecti
          printf("Peer : [%s] disconnected.\n" , mac_address);
          // Handle the event
          break;
-	
       case WIFI_DIRECT_CONNECTION_IN_PROGRESS:
          printf("Connection in progress\n");
          // Handle the event
@@ -322,7 +320,8 @@ connection_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_connecti
 
 
          2. Connect with a Wi-Fi Direct™ peer device.
 
-
            Check whether Wi-Fi Direct™ is activated using the wifi_direct_get_state() function, and then get the specific device address from the user. Call the wifi_direct_foreach_discovered_peers() function to get a specific device address as a result of the device discovering process.
            
+
            Check whether Wi-Fi Direct™ is activated using the wifi_direct_get_state() function, and then get the specific device address.
             
+
            You can obtain the address directly from the user (as in the following example), or by calling the wifi_direct_foreach_discovered_peers() function to the address through the device discovery process.
            
 
 
             char * mac_address = NULL;
@@ -364,7 +363,7 @@ if (error_code != WIFI_DIRECT_ERROR_NONE)
 printf("Connection step finished\n");
 
            3. 
 
-
          3. Disconnect from a specific Wi-Fi Direct™ device:
+
          4. When the connection is no longer needed, disconnect from the Wi-Fi Direct™ device:
 
 
             char * mac_address = NULL;
@@ -408,7 +407,7 @@ printf("Disconnection step finished\n");
 
  
            Managing Wi-Fi Direct™ Groups
            
 
-
            To create an autonomous Wi-Fi Direct™ group without connection and to make your device an autonomous group owner:
            
+
            To create an autonomous Wi-Fi Direct™ group and to make your device the autonomous group owner:
            
 
 
            1. Create a Wi-Fi Direct™ group and become a group owner:
 
@@ -433,7 +432,7 @@ if (error_code != WIFI_DIRECT_ERROR_NONE)
 printf("Connection step finished\n");
 
            5. 
 
-
          5. Destroy all connections and the group:
+
          6. When Wi-Fi Direct ™ connections or group is no longer needed, destroy all connections and the group:
 
 
             wifi_direct_state_e state;
@@ -454,16 +453,39 @@ if (error_code != WIFI_DIRECT_ERROR_NONE)
 }
 
 printf("Disconnection step finished\n");
-
            7. 
-
          7. When Wi-Fi Direct™ connections or group is no longer needed, destroy all the Wi-Fi Direct™ connections and group.
          
+
        
 
  
        Deactivating Wi-Fi Direct™
        
 
-
        To power off the local device when Wi-Fi Direct™ is no longer needed (or the application is exiting), use the wifi_direct_deactivate() function:
        
-
+
        To deactivate Wi-Fi Direct™ when it is no longer needed (or the application is exiting):
        
+
          
+
        1. 
+
          Power off the local device using the wifi_direct_deactivate() function:
          
 
           wifi_direct_deactivate(NULL);
 
          
+
          2. 
+
+
        2. Unset the callbacks:
+
          +// Unset the activation or deactivation event callback
+wifi_direct_unset_device_state_changed_cb(NULL);
+
+// Unset the discovery event callback 
+wifi_direct_unset_discovery_state_changed_cb(NULL);
+
+// Unset the connection event callback
+wifi_direct_unset_connection_state_changed_cb(NULL);
+
          
+
          3. 
+
+
        3. 
+
          Release Wi-Fi Direct™:
          
+
          +wifi_direct_deinitialize();
+
          
+
          4. 
+
        
 
 
 
diff --git a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
index 0a2da8f..b161939 100644
--- a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
@@ -27,7 +27,6 @@
 			
      2. Activating a Wi-Fi Device
        3. 
 			
      3. Scanning for Access Points
        4. 
 			
      4. Connecting to a Specific Access Point
        5. 
-			
      5. Deactivating the Wi-Fi Device
        6. 
 		        
         
        Related Info
        
         
 
  
        Initializing Wi-Fi
        
@@ -74,24 +72,26 @@ if (error_code != WIFI_ERROR_NONE)
    return;
      4. -
    +

  • When Wi-Fi is no longer needed or the application is exiting, release Wi-Fi:

     wifi_deinitialize();
    +
    • +

    Activating a Wi-Fi Device

    To activate and deactivate a local Wi-Fi device, and to check that Wi-Fi is activated:

    -
    1. Activate a Wi-Fi device using the wifi_activate() function. After the wifi_activate() function is completed, the __wifi_activated_cb() function is invoked. - +
      1. Activate a Wi-Fi device using the wifi_activate() function: 
         error_code = wifi_activate(__wifi_activated_cb, NULL);
        -

        Define the __wifi_activated_cb() function for a callback. In case of Wi-Fi device activation, an information message is printed using dlog util (or shown to the user in another way).

        +

        Define the __wifi_activated_cb() callback, which is invoked when the Wi-Fi activation is completed.

        +

        In the following example, the callback prints an information message using the dlogutil tool:

         static void 
@@ -115,19 +115,27 @@ else
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Fail to get Wi-Fi device state.");
 }
-
      +
      2. +
    2. +

      To deactivate the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the wifi_deactivate() function:

      +
      +wifi_deactivate(NULL, NULL);
+
      +
      3. +

    Scanning for Access Points

    -

    To scan nearby access points, and after scanning, to print the result of the scan, such as the AP name and state:

    +

    To scan nearby access points and print the scanning result, such as the AP name and state:

    -
    1. Scan nearby access points asynchronously. When the scan is finished, the __scan_request_cb() function is called. +
      1. Scan nearby access points asynchronously: 
         wifi_scan(__scan_request_cb, NULL);
        2. -
      2. Define a callback function to be called when the scan is finished. In this tutorial, the callback is the __scan_request_cb() function. It invokes the wifi_foreach_found_aps() function for getting information on the found AP. The wifi_foreach_found_aps() function gets the result of the scan. The __wifi_found_ap_cb() function is called when you get the found access point repeatedly. +
      3. Define a callback, which is invoked when the scan is finished. +

        In the following example, the callback calls the wifi_foreach_found_aps() function for getting information on the found AP. The wifi_foreach_found_aps() function gets the result of the scan, and the __wifi_found_ap_cb() callback is called for each found access point.

         void 
@@ -139,7 +147,8 @@ __scan_request_cb(wifi_error_e error_code, void *user_data)
 }
        4. -
      4. Show the result of the scan using the __wifi_found_ap_cb() callback function, which is invoked by the wifi_foreach_found_aps() function. In this tutorial, print the AP name and connection state. +
      5. Show the result of the scan using the __wifi_found_ap_cb() callback. +

        In the following example, the callback prints the AP name and connection state:

         bool 
@@ -174,14 +183,14 @@ print_state(wifi_connection_state_e state)
 {
    switch (state) 
    {
-   case WIFI_CONNECTION_STATE_DISCONNECTED:
-      return "Disconnected";
-   case WIFI_CONNECTION_STATE_ASSOCIATION:
-      return "Association";
-   case WIFI_CONNECTION_STATE_CONNECTED:
-      return "Connected";
-   case WIFI_CONNECTION_STATE_CONFIGURATION:
-      return "Configuration";
+      case WIFI_CONNECTION_STATE_DISCONNECTED:
+         return "Disconnected";
+      case WIFI_CONNECTION_STATE_ASSOCIATION:
+         return "Association";
+      case WIFI_CONNECTION_STATE_CONNECTED:
+         return "Connected";
+      case WIFI_CONNECTION_STATE_CONFIGURATION:
+         return "Configuration";
    }
 }
        @@ -193,7 +202,7 @@ print_state(wifi_connection_state_e state)

        To make a connection using a specific access point:

        1. Select an access point. -

          Check whether Wi-Fi is activated using the wifi_is_activated() function, and then receive the specific AP name from the user. Call the wifi_foreach_found_aps() function to compare the AP name with the result of the scan and connecting to the AP.

          +

          Check whether Wi-Fi is activated using the wifi_is_activated() function, and receive the specific AP name from the user. Call the wifi_foreach_found_aps() function to compare the AP name with the result of the scan:

           char ap_name[33];
@@ -202,13 +211,14 @@ bool state = false;
 wifi_is_activated(&state);
 if (state == false)
    return -1;
+
 dlog_print(DLOG_INFO, LOG_TAG, "Input a part of AP name to connect : ");
 error_code = scanf("%32s", ap_name);
 
 error_code = wifi_foreach_found_aps(__found_connect_ap_cb, ap_name);
 if (error_code != WIFI_ERROR_NONE) 
 {
-   dlog_print(DLOG_INFO, LOG_TAG, "Fail to connect (can’t get AP list)");
+   dlog_print(DLOG_INFO, LOG_TAG, "Fail to connect (can't get AP list)");
 
    return -1;
 }
@@ -217,7 +227,8 @@ dlog_print(DLOG_INFO, LOG_TAG, "Connection step finished");
        2. Make a connection with an access point. -

          The wifi_foreach_found_aps() function called above invokes a callback function, which is __found_connect_ap_cb(). Define the __found_connection_ap_cb() callback. This function compares user_data (the AP name from the user input) with the name of the found AP. If it is correct, the function checks whether the AP requires a passphrase. Set the passphrase using the wifi_ap_set_passphrase() function.

          +

          Define the __found_connect_ap_cb() callback invoked by the wifi_foreach_found_aps() function.

          +

          The callback compares user_data (the AP name from the user input) with the name of the found AP. If it is correct, the function checks whether the AP requires a passphrase. Set the passphrase using the wifi_ap_set_passphrase() function.

          Finally, connect to a specific AP using the wifi_connect() function.

          @@ -277,8 +288,8 @@ __found_connect_ap_cb(wifi_ap_h ap, void *user_data)
 }
          3. -
        3. Provide a notification about the result of the connection. -

          The wifi_connect() function called earlier invokes the __connected_cb() function. With this function, you can provide the result of the connection.

          +
        4. Provide a notification about the connection result. +

          The wifi_connect() function called within the __found_connect_ap_cb() callback invokes the __connected_cb() function, which you can use to notify the user of the connection result:

           static void 
@@ -291,12 +302,7 @@ __connected_cb(wifi_error_e result, void* user_data)
 }
        -

        Deactivating the Wi-Fi Device

        -

        To power off the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the wifi_deactivate() function:

        -
        -wifi_deactivate(NULL, NULL);
-
        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 fa31d6c..9d78344 100644 --- a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm @@ -389,6 +389,7 @@ _free_gl_event_data(calendar_gl_event_data_t *gl_event_data) {    if (NULL == gl_event_data)       return; +    free(gl_event_data->summary);    free(gl_event_data->description);    free(gl_event_data); @@ -797,6 +798,7 @@ _free_gl_todo_data(calendar_gl_todo_data_t *gl_todo_data) {    if (NULL == gl_todo_data)       return; +    free(gl_todo_data->summary);    free(gl_todo_data->description);    free(gl_todo_data); 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 c2adc87..fb16b8e 100644 --- a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm @@ -104,15 +104,15 @@ func(void)    dlog_print(DLOG_INFO, LOG_TAG, "Audio jack status: %d", value);    switch (value)    { -   case RUNTIME_INFO_AUDIO_JACK_STATUS_UNCONNECTED: -      // Audio jack is disconnected -      break; -   case RUNTIME_INFO_AUDIO_JACK_STATUS_CONNECTED_3WIRE: -      // 3-conductor wire is connected -      break; -   case RUNTIME_INFO_AUDIO_JACK_STATUS_CONNECTED_4WIRE: -      // 4-conductor wire is connected -      break; +      case RUNTIME_INFO_AUDIO_JACK_STATUS_UNCONNECTED: +         // Audio jack is disconnected +         break; +      case RUNTIME_INFO_AUDIO_JACK_STATUS_CONNECTED_3WIRE: +         // 3-conductor wire is connected +         break; +      case RUNTIME_INFO_AUDIO_JACK_STATUS_CONNECTED_4WIRE: +         // 4-conductor wire is connected +         break;    } }
      diff --git a/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm index 144e452..f71d009 100644 --- a/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm @@ -73,6 +73,7 @@ function listSuccess(members)    if (members.length === 0)    {       console.log("The archive is empty"); +       return;    }    console.log("Files in the archive:") diff --git a/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm index 3df2a46..e2dd9ac 100644 --- a/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm @@ -164,7 +164,7 @@ Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Ori    }    /* Response data */ -   $arr = array("user_name" => "tizen", "phone_number" => "12312334234"); +   $arr = array("user_name" => "tizen", "phone_number" => "12312334234");    /* Response data returned in JSON format */    echo json_encode($arr); @@ -186,9 +186,9 @@ Access-Control-Request-Headers: Header-Custom-Tizen, origin, content-type 
       HTTP/1/1 200 OK
 Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
-Access-Control-Allow-Methods:PUT
-Access-Control-Allow-Origin:http://origin-domain.com
-Access-Control-Max-Age:86400
+Access-Control-Allow-Methods: PUT
+Access-Control-Allow-Origin: http://origin-domain.com
+Access-Control-Max-Age: 86400

    2. Once the access authority is checked, the browser sends the actual data request to the server side. This request includes the actual data:

      @@ -204,7 +204,7 @@ HTTP/1/1 200 OK
 Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
 Access-Control-Allow-Methods: PUT
 Access-Control-Allow-Origin: http://origin-domain.com
-Access-Control-Max-Age:86400
+Access-Control-Max-Age: 86400

      3. If the access authority fails, the browser does not send the actual data request. Instead, the following error occurs in the browser side:

      diff --git a/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm b/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm index 2437220..b9f4c6d 100644 --- a/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm +++ b/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm @@ -51,7 +51,7 @@

      Signal and Slot

      -

      In DALi applications, objects can send signals containing event information, which can be received by other objects using special functions known as slots. The DALi event system follows the signal and slot mechanism for communication between objects.

      +

      In DALi applications, a signal and slot mechanism is used for communication between objects. This means that, in the DALi event system, objects can send signals containing event information, which can be received by other objects using special functions known as slots.

      Signal events are emitted when a certain action or event occurs. The application can connect to these signals. Standard C-style functions can be used to connect to these signals if no local data needs to be accessed, otherwise a class function can also be connected.

      Applications can manually disconnect from signals when required. However, DALi also provides safe signal disconnection. This means that when the connecting object is deleted, the signal is automatically disconnected.

      @@ -241,17 +241,14 @@ stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldExample::OnTo stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );

      Any key inputs and touches on the stage are handled by 2 callback functions, HelloWorldExample::OnKeyEvent and HelloWorldExample::OnTouch.

      - -

      Note the first parameter of HelloWorldExample::OnTouch (actor) is passed by value, not by reference or by pointer. -You can just pass instances of most DALi classes which inherit from Dali::BaseHandle (in mobile and wearable) by value. -This is due to Handle/Body Pattern widely used in DALi. -

      +

      Note that the first parameter of the HelloWorldExample::OnTouch callback (actor) is passed by a value, not by a reference or a pointer. You can simply pass instances of most DALi classes by value, when the class inherits from the Dali::BaseHandle class (in mobile and wearable applications). This is due to the handle/body pattern widely used in DALi.

      - bool OnTouch( Actor actor, const TouchEvent& event )
+bool OnTouch( Actor actor, const TouchEvent& event )
      - + +
    3. Start the application main loop:

      To run the application, start its main loop. This ensures that images are displayed, and events as well as signals are dispatched and captured.

      @@ -277,7 +274,7 @@ application.MainLoop();

      Figure: Basic DALi application

      Basic DALi application

      - + diff --git a/org.tizen.ui.practices/html/native/dali/event_handling_n.htm b/org.tizen.ui.practices/html/native/dali/event_handling_n.htm index 157a9b1..e781f89 100644 --- a/org.tizen.ui.practices/html/native/dali/event_handling_n.htm +++ b/org.tizen.ui.practices/html/native/dali/event_handling_n.htm @@ -11,7 +11,7 @@ - Event Handling: Managing the Event Flow + Event Handling: Managing the Event Flow @@ -67,14 +67,12 @@

      DALi emits various types of signals to an application to inform it of user actions and the application can handle them through slots.

      -

      The concept of signal and slots were introduced by Qt for communication between objects, which inspires DALi.

      +

      The concept of signal and slots were introduced by Qt for communication between objects, and it inspires DALi.

      -

      Figure: A schematic example of signal-slot connections

      - - -

      Signal and slot event handling

      +

      Figure: Schematic example of signal-slot connections

      +

      Schematic example of signal-slot connections

      In the figure, signal 1 is connected to slot 1, signal 2 is connected to slot 1 and slot 3, and signal 3 is connected to slot 2.

      - +

      The signal and slot system has following advantages:

      • Object-oriented: supports callbacks for C++ member functions
        • @@ -360,7 +358,7 @@ void HelloWorldExample::OnKeyEvent( const KeyEvent& event ) - +

        The actor receiving events is passed to the callbacks.

        @@ -472,7 +470,7 @@ void HelloWorldExample::OnKeyEvent( const KeyEvent& event ) - +

        Dali::Toolkit::KeyboardFocusManager provides the functionality of handling keyboard navigation and maintaining the 2-dimensional keyboard focus chain. Dissimilar to the key input focus, the keyboard focus is about the focus moving between actors, and that is why this signal is provided by the specific focus managing class.

      @@ -573,7 +571,7 @@ void HelloWorldExample::OnPan( Actor actor, const PanGesture& gesture ) - + diff --git a/org.tizen.ui.practices/html/native/efl/component_background_mn.htm b/org.tizen.ui.practices/html/native/efl/component_background_mn.htm index 43a1fb5..656b174 100644 --- a/org.tizen.ui.practices/html/native/efl/component_background_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_background_mn.htm @@ -42,7 +42,9 @@

      This feature is supported in mobile applications only.

      The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.

      - + +

      For more information, see the Background API.

      +

      Figure: Red color background

      Red color background

      @@ -51,7 +53,7 @@

      Adding a Background Component

      -

      A background is created with the elm_bg_add() function.

      +

      To create a background, use the elm_bg_add() function:

       Evas_Object *bg, *parent;
@@ -73,13 +75,13 @@ elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
 
 
      Changing the Image of the Background
      
 
-
      It is also possible to set an image or an Edje group as a background using the elm_bg_file_set() function. The display mode of the image in the background can be chosen with elm_bg_option_set(), where the following modes are available:
      
+
      It is also possible to set an image or an Edje group as a background using the elm_bg_file_set() function. The display mode of the image in the background can be chosen with the elm_bg_option_set() function. The following modes are available:
      
 
 
        
-    
      • ELM_BG_OPTION_CENTER: center the background image.
        • 
-    
      • ELM_BG_OPTION_SCALE: scale the background image, retaining aspect ratio.
        • 
-    
      • ELM_BG_OPTION_STRETCH: stretch the background image to fill the UI component's area.
        • 
-    
      • ELM_BG_OPTION_TILE: tile the background image at its original size.
        • 
+    
      • ELM_BG_OPTION_CENTER: Center the background image.
        • 
+    
      • ELM_BG_OPTION_SCALE: Scale the background image, retaining aspect ratio.
        • 
+    
      • ELM_BG_OPTION_STRETCH: Stretch the background image to fill the UI component's area.
        • 
+    
      • ELM_BG_OPTION_TILE: Tile the background image at its original size.
        • 
 
      
 
 
      @@ -94,13 +96,13 @@ elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
 
 
      Using Overlay
      
 
-
      An overlay can be set using the overlay part name.
      
+
      To set an overlay, use the overlay part name. In the following example, the overlay is an Edje object that is displayed on top of the current background object.
      
 
 
       elm_object_part_content_set(bg, "overlay", over);
 
      
 
-
      Here, the overlay is an Edje object that is displayed on top of the current background object.
      
+
 
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_button_mn.htm b/org.tizen.ui.practices/html/native/efl/component_button_mn.htm
index 909ddc0..a183aeb 100644
--- a/org.tizen.ui.practices/html/native/efl/component_button_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_button_mn.htm
@@ -43,7 +43,9 @@
 
 
      This feature is supported in mobile applications only.
      
 
-
      The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.
      
+
      The Elementary button component is a simple push button. It is composed of a label icon and an icon object. It has an autorepeat feature.
      
+
+
      For more information, see the Button API.
      Figure: Button component
      Button component
      
@@ -53,7 +55,7 @@
 
 
      Adding a Button Component
      
 
-
      Create a button.
      
+
      To create a button, use the elm_button_add() function:
       Evas_Object *button, *parent;
 
@@ -62,7 +64,7 @@ button = elm_button_add(parent);
      Adding an Icon Inside a Button
      
 
-
      The icon can be updated with elm_object_part_content_set() function with the icon part name.
      
+
      To update the icon, use the elm_object_part_content_set() function with the icon part name:
       Evas_Object *ic;
@@ -73,7 +75,7 @@ elm_object_part_content_set(button, "icon", ic);
 
 
      Adding Text Inside a Button
      
 
-
      The label can be modified using the elm_object_text_set() function.
      
+
      Modify the label using the elm_object_text_set() function:
      
 
 
       elm_object_text_set(button, "Click me!");
@@ -81,7 +83,7 @@ elm_object_text_set(button, "Click me!");
 
 
      Using Button Styles
      
 
-
      Various styles can be used on the button. Tizen supports the following styles:
      
+
      The following styles are available for the button component:
      
 
 
        
     
      • default
        • 
@@ -94,12 +96,12 @@ elm_object_text_set(button, "Click me!");
     
      • option
        • 
 
      
 
-
      You can see these themes in action on the following screenshot (in the above order).
      
+
      The following figure shows the themes in the same order.
      
 
 
      Figure: Button component
      
 
      Button component
      
 
-
      To change the style of the button, call the elm_object_style_set() function on the button object.
      
+
      To change the style of the button, call the elm_object_style_set() function on the button object:
      
 
 
       elm_object_style_set(button,"icon_expand_add");
@@ -107,7 +109,7 @@ elm_object_style_set(button,"icon_expand_add");
 
 
      Using the Button Callbacks
      
 
-
      The button emits the following signals:
      
+
      The button component emits the following signals:
      
 
 
        
     
      • clicked: The user clicked the button (press/release).
        • 
@@ -118,15 +120,15 @@ elm_object_style_set(button,"icon_expand_add");
 
 
        For all these signals the event_info parameter returned in the callback is NULL.
        
 
-
        This is an example to register and define a callback function called by the clicked signal.
        
-
+
        To register and define a callback function called by the clicked signal:
        
 
         {
    evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
 }
 // Callback function for the "clicked" signal
 // This callback is called when the button is clicked by the user
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
 }
@@ -136,29 +138,36 @@ void clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 
        The autorepeat feature is enabled by default. It consists of calling the repeated signal when the user keeps the button pressed. This feature can be disabled with the elm_button_autorepeat_set() function. The autorepeat is configured with the following functions:
        
 
          
-    
        • elm_button_autorepeat_initial_timeout_set(): to set the initial timeout before the autorepeat event is generated
          • 
-    
        • elm_button_autorepeat_gap_timeout_set(): to set the interval between two autorepeat events
          • 
+    
        • elm_button_autorepeat_initial_timeout_set(): Set the initial timeout before the autorepeat event is generated.
          • 
+    
        • elm_button_autorepeat_gap_timeout_set(): Set the interval between 2 autorepeat events.
          • 
 
        
-
-
        Disable the autorepeat feature.
        
+
        To manage the autorepeat features:
        
+
          
+
        • 
+
          Disable the autorepeat feature:
          
 
           elm_button_autorepeat_set(button, EINA_FALSE);
 
          
-
-
          Enable the autorepeat feature.
          
+
          • 
+
        • 
+
          Enable the autorepeat feature:
          
 
           elm_button_autorepeat_set(button, EINA_TRUE);
 
          
-
-
          Set the initial timeout to five seconds.
          
+
          • 
+
        • 
+
          Set the initial timeout to 5 seconds:
          
 
           elm_button_autorepeat_initial_timeout_set(button, 5.0);
 
          
-
-
          Set the gap between two signals to 0.5 seconds.
          
+
          • 
+
        • 
+
          Set the gap between 2 signals to 0.5 seconds:
          
 
           elm_button_autorepeat_gap_timeout_set(button, 0.5);
 
          
+
          • 
+
        
 
 
      
     
 
 
 
 
 
 
 
 
      
diff --git a/org.tizen.ui.practices/html/native/efl/component_button_wn.htm b/org.tizen.ui.practices/html/native/efl/component_button_wn.htm
index c203e9f..5d30319 100644
--- a/org.tizen.ui.practices/html/native/efl/component_button_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_button_wn.htm
@@ -44,8 +44,9 @@
 
 
      This feature is supported in wearable applications only.
      
 
-
      The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.
      
+
      The Elementary button component is a simple push button. It is composed of a label icon and an icon object. It has an autorepeat feature.
      
 
+
      For more information, see the Button API.
      Figure: Button component
      Button component
      
@@ -55,7 +56,7 @@
 
 
      Adding a Button Component
      
 
-
      Create a button.
      
+
      To create a button, use the elm_button_add() function:
       Evas_Object *button, *parent;
 
@@ -64,17 +65,18 @@ button = elm_button_add(parent);
      Adding an Icon Inside a Button
      
 
-
      The icon can be updated with elm_object_part_content_set() function with the icon part name.
      
+
      To update the icon, use the elm_object_part_content_set() function with the icon part name:
       Evas_Object *ic;
 ic = elm_icon_add(button);
 elm_image_file_set(ic, "icon.png", NULL);
-elm_object_part_content_set(button, "icon", ic);
      
+elm_object_part_content_set(button, "icon", ic);
+
      Adding Text Inside a Button
      
 
-
      The label can be modified using the elm_object_text_set() function.
      
+
      Modify the label using the elm_object_text_set() function:
       elm_object_text_set(button, "Click me!");
@@ -82,7 +84,8 @@ elm_object_text_set(button, "Click me!");
 
 
      Using Button Styles
      
 
-
      Various styles can be used on the button. Tizen supports the following styles for the rectangular UI component:
      
+
      Various styles can be used on the button.
      
+
      The following styles are available for a rectangular screen:
      
 
        
     
      • default
        • 
     
      • green
        • 
@@ -90,13 +93,13 @@ elm_object_text_set(button, "Click me!");
     
      • red
        • 
     
      • nextdepth
        • 
 
      
-
      Tizen supports the following styles for the circular UI component:
      
+
      The following styles are available for a circular screen:
      
 
        
     
      • default
        • 
     
      • bottom
        • 
 
      
 
-
      To change the style of the button, call the elm_object_style_set() function on the button object.
      
+
      To change the style of the button, call the elm_object_style_set() function on the button object:
      
 
 
       // Example for the rectangular UI component
@@ -108,7 +111,7 @@ elm_object_style_set(button, "bottom");
 
 
      Using the Button Callbacks
      
 
-
      The button emits the following signals:
      
+
      The button component emits the following signals:
      
 
 
        
     
      • clicked: The user clicked the button (press/release).
        • 
@@ -119,14 +122,15 @@ elm_object_style_set(button, "bottom");
 
 
        For all these signals the event_info parameter returned in the callback is NULL.
        
 
-
        This is an example to register and define a callback function called by the clicked signal.
        
+
        To register and define a callback function called by the clicked signal:
        
 
         {
    evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
 }
 // Callback function for the "clicked" signal
 // This callback is called when the button is clicked by the user
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
 }
@@ -136,29 +140,37 @@ void clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 
        The autorepeat feature is enabled by default. It consists of calling the repeated signal when the user keeps the button pressed. This feature can be disabled with the elm_button_autorepeat_set() function. The autorepeat is configured with the following functions:
        
 
          
-    
        • elm_button_autorepeat_initial_timeout_set(): to set the initial timeout before the autorepeat event is generated
          • 
-    
        • elm_button_autorepeat_gap_timeout_set(): to set the interval between two autorepeat events
          • 
+    
        • elm_button_autorepeat_initial_timeout_set(): Set the initial timeout before the autorepeat event is generated.
          • 
+    
        • elm_button_autorepeat_gap_timeout_set(): Set the interval between 2 autorepeat events.
          • 
 
        
 
-
        Disable the autorepeat feature.
        
+
        To manage the autorepeat features:
        
+
          
+
        • 
+
          Disable the autorepeat feature:
          
 
           elm_button_autorepeat_set(button, EINA_FALSE);
 
          
-
-
          Enable the autorepeat feature.
          
+
          • 
+
        • 
+
          Enable the autorepeat feature:
          
 
           elm_button_autorepeat_set(button, EINA_TRUE);
 
          
-
-
          Set the initial timeout to five seconds.
          
+
          • 
+
        • 
+
          Set the initial timeout to 5 seconds:
          
 
           elm_button_autorepeat_initial_timeout_set(button, 5.0);
 
          
-
-
          Set the gap between two signals to 0.5 seconds.
          
+
          • 
+
        • 
+
          Set the gap between 2 signals to 0.5 seconds:
          
 
           elm_button_autorepeat_gap_timeout_set(button, 0.5);
 
          
+
          • 
+
        
 
 
      
     
 
 
 
 
 
 
 
 
 
 
 
 
      
diff --git a/org.tizen.ui.practices/html/native/efl/component_calendar_mn.htm b/org.tizen.ui.practices/html/native/efl/component_calendar_mn.htm
index e718a69..ea9f5f2 100644
--- a/org.tizen.ui.practices/html/native/efl/component_calendar_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_calendar_mn.htm
@@ -42,6 +42,8 @@
 
 
      The calendar component displays and manipulates month views.
      
 
+
      For more information, see the Calendar API.
      
+
     
      Figure: Calendar component
      Calendar component
       
   
@@ -50,7 +52,7 @@
 
 
      Adding a Calendar Component
      
 
-
      The calendar component is created with the elm_calendar_add() function. The following example shows how to create a calendar component and set the current time to display the current month:
      
+
      Create the calendar component with the elm_calendar_add() function. The following example shows how to create a calendar component and set the current time to display the current month.
       Evas_Object *calendar, *parent;
@@ -63,21 +65,21 @@ elm_calendar_selected_time_set(calendar, gmtime(&the_time));
 
      Manipulating the Month View
      
-
      You can make various modifications to the month view:
      
+
      To modify the month view:
      • 
-
        By default, the first day of the week is Sunday. To change it to Monday:
        
+
        Change the first day of the week. By default, the first day of the week is Sunday. To change it to Monday:
        
 
         elm_calendar_first_day_of_week_set(calendar, ELM_DAY_MONDAY);
 
        • 
 
-
      • To modify the names of the weekdays, use the elm_calendar_weekdays_names_set() function:
        
+
      • Modify the names of the weekdays using the elm_calendar_weekdays_names_set() function:
        
 
         const char *weekname[7] = {"A", "B", "C", "D", "E", "F", "G"};
 elm_calendar_weekdays_names_set(calendar, &weekname);
 
        • 
 
-
      • You can mark holidays with the elm_calendar_mark_add() function. The following example shows how to mark a Sunday as holiday:
+
      • Mark holidays with the elm_calendar_mark_add() function. The following example shows how to mark a Sunday as holiday.
 
         struct tm *sunday = gmtime(&the_time);
 sunday->tm_mday -= sunday->tm_wday;
@@ -89,7 +91,7 @@ elm_calendar_mark_add(calendar, "holiday", sunday, ELM_CALENDAR_WEEKLY
 
 
        Using the Calendar Callbacks
        
 
-
        The calendar emits the “changed” signal when the selected date is changed. You can register a callback to this signal. The event_info parameter is NULL.
        
+
        The calendar component emits the "changed" signal when the selected date is changed. You can register a callback to this signal. The event_info parameter is NULL.
        
 
 
         {
diff --git a/org.tizen.ui.practices/html/native/efl/component_check_mn.htm b/org.tizen.ui.practices/html/native/efl/component_check_mn.htm
index f4eddcb..0ebdc7a 100644
--- a/org.tizen.ui.practices/html/native/efl/component_check_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_check_mn.htm
@@ -42,10 +42,11 @@
 
        This feature is supported in mobile applications only.
        
 
 
-
        The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.
        
+
        The check component is similar to the radio component, except that it does not work as a group. It toggles a boolean value between true and false.
        
 
-
        This UI component inherits from the layout component. All layout functions can be used on the check component.
        
+
        The check component inherits from the layout component, which means that layout functions can be used on the check component.
        
 
+
        For more information, see the Check API.
        
 
 
        Figure: Check component
         
 
        Check component
         
@@ -55,7 +56,7 @@
 
 
        Adding a Check Component
        
 
-
        The following example shows how to create a check component.
        
+
        To create a check component, use the elm_check_add() function:
        
 
 
         Evas_Object *check, *parent;
@@ -64,36 +65,41 @@ check = elm_check_add(parent);
 
 
        Modifying the Check Styles
        
 
-
        The check component style can be set with the elm_object_style_set() function. The following styles are available:
        
+
        Set the check component style with the elm_object_style_set() function. The following styles are available:
        
 
          
     
        • default
          • 
     
        • favorite
          • 
     
        • on and off
          • 
 
        
 
-
        The following example sets the favorite style on our check object.
        
+
        To set the favorite style on the check object:
        
 
         elm_object_style_set(check, "favorite");
 
        
 
-
        To get the current style, use the elm_object_style_get() function.
        
+
        To get the current style, use the elm_object_style_get() function:
        
 
         char *style = elm_object_style_get(check);
 
        
 
 
        Using the Check Component
        
 
-
        After having created a check object, it is possible to set its boolean value to EINA_TRUE.
        
+
        To use the check component:
        
+
          
+
        • 
+
          Set the check component's boolean value to EINA_TRUE:
          
 
           elm_check_state_set(check, EINA_TRUE);
 
          
-
-
          You can also retrieve the current value of the check object.
          
+
          • 
+
        • 
+
          Retrieve the current value of the check object:
          
 
           Eina_Bool value = elm_check_state_get(check);
 
          
-
-
          As with a radio object, an icon and a label can be set.
          
+
          • 
+
        • 
+
          Set an icon and a label:
          
 
           // Create a Home icon 
 Evas_Object *icon;
@@ -107,15 +113,17 @@ elm_object_part_content_set(check, "icon", icon);
 // Set the check label 
 elm_object_text_set(check, "Check label");
 
          
-
-
          You can also modify the on and off labels.
          
+
          • 
+
        • 
+
          Modify the on and off labels:
          
 
 
           elm_object_part_text_set(check, "on", "True");
 elm_object_part_text_set(check, "off", "False");
 
          
-
-
          The get functions of the elementary object API can be used to retrieve the content set to the check object.
          
+
          • 
+
        • 
+
          Retrieve the content set to the check object:
          
 
 
           // Get the current set text of the check label 
@@ -124,12 +132,14 @@ char *text = elm_object_text_get(check);
 // Get the content set in the icon part 
 Evas_Object *icon = elm_object_part_content_get(check, "icon");
 
          
+
          • 
+
        
 
 
        Using the Check Callbacks
        
 
-
        When the value is changed by the user, the changed signal is emitted. The event_info parameter is NULL.
        
+
        When the value is changed by the user, the changed signal is emitted. The event_info parameter is NULL.
        
 
-
        The following example shows how to register a callback on this signal.
        
+
        To register a callback on the changed signal:
        
 
         {
    evas_object_smart_callback_add(check, "changed", changed_cb, data);
@@ -137,7 +147,8 @@ Evas_Object *icon = elm_object_part_content_get(check, "icon");
 
 // Callback function for the "changed" signal
 // This callback is called when the check value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_check_wn.htm b/org.tizen.ui.practices/html/native/efl/component_check_wn.htm
index 9a5f515..da5f0d2 100644
--- a/org.tizen.ui.practices/html/native/efl/component_check_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_check_wn.htm
@@ -42,10 +42,11 @@
 
 
        This feature is supported in wearable applications only.
        
 
-
        The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.
        
+
        The check component is similar to the radio component, except that it does not work as a group. It toggles a boolean value between true and false.
        
 
-
        This UI component inherits from the layout component. All layout functions can be used on the check component.
        
+
        The check component inherits from the layout component, which means that layout functions can be used on the check component.
        
 
+
        For more information, see the Check API.
        
 
 
        Figure: Check component
         
 
        Check component
         
@@ -55,7 +56,7 @@
 
 
        Adding a Check Component
        
 
-
        The following example shows how to create a check component.
        
+
        To create a check component, use the elm_check_add() function:
        
 
         Evas_Object *check, *parent;
 check = elm_check_add(parent);
@@ -63,42 +64,47 @@ check = elm_check_add(parent);
 
 
        Modifying the Check Styles
        
 
-
        The check component style can be set with the elm_object_style_set() function.
        
-
        The following styles are available for the rectangular UI component:
        
+
        Set the check component style with the elm_object_style_set() function.
        
+
        The following styles are available for the rectangular screen:
        
 
          
 	
        • default
          • 
 	
        • on and off
          • 
 
        
-
        The following styles are available for the circular UI component:
        
+
        The following styles are available for the circular screen:
        
 
          
 	
        • default
          • 
 	
        • small
          • 
 	
        • on and off
          • 
 
        
 
-
        The following example sets the on and off style on our check object.
        
+
        To set the on and off style on the check object:
        
 
         elm_object_style_set(check, "on and off");
 
        
 
-
        To get the current style, use the elm_object_style_get() function.
        
+
        To get the current style, use the elm_object_style_get() function:
        
 
         char *style = elm_object_style_get(check);
 
        
 
 
        Using the Check Component
        
 
-
        After having created a check object, it is possible to set its boolean value to EINA_TRUE.
        
+
        To use the check component:
        
+
          
+
        • 
+
          Set the check component's boolean value to EINA_TRUE:
          
 
           elm_check_state_set(check, EINA_TRUE);
 
          
-
-
          You can also retrieve the current value of the check object.
          
+
          • 
+
        • 
+
          Retrieve the current value of the check object:
          
 
           Eina_Bool value = elm_check_state_get(check);
 
          
-
-
          As with a radio object, an icon can be set for the rectangular UI component.
          
+
          • 
+
        • 
+
          Set an icon for the rectangular screen:
          
 
           // Create a Home icon 
 Evas_Object *icon;
@@ -109,19 +115,21 @@ elm_icon_standard_set(icon, "home");
 // Set it to the check object 
 elm_object_part_content_set(check, "icon", icon);
 
          
-
-
          The get functions of the elementary object API can be used to retrieve the content set to the check object.
          
+
          • 
+
        • 
+
          Retrieve the content set to the check object:
          
 
           // Get the content set in the icon part 
 Evas_Object *icon = elm_object_part_content_get(check, "icon");
 
          
+
          • 
+
        
 
 
        Using the Check Callbacks
        
 
-
        When the value is changed by the user, the changed signal is emitted. The event_info parameter is NULL.
        
-
-
        The following example shows how to register a callback on this signal.
        
+
        When the value is changed by the user, the changed signal is emitted. The event_info parameter is NULL.
        
 
+
        To register a callback on the changed signal:
        
 
         {
    evas_object_smart_callback_add(check, "changed", changed_cb, data);
@@ -129,7 +137,8 @@ Evas_Object *icon = elm_object_part_content_get(check, "icon");
 
 // Callback function for the "changed" signal
 // This callback is called when the check value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_datetime_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_datetime_wn.htm
index 90e1621..ae2c5e9 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_datetime_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_datetime_wn.htm
@@ -47,7 +47,8 @@
 
 
        Creating a Circle Datetime
        
 
-
        You can use the eext_circle_object_datetime_add() function to create a circle object. When creating a circle datetime, the elm_datetime handle must be passed as an argument. If a circle surface is passed as an argument, a circle object connected with a circle surface is created, and it is rendered by the circle surface. When NULL is passed as a surface argument, the new circle object is managed and rendered by itself.
        
+
        To create a circle datetime object, use the eext_circle_object_datetime_add() function.
        
+
        When creating a circle datetime, the elm_datetime handle must be passed as a parameter. If a circle surface is passed as a parameter, a circle object connected with a circle surface is created, and it is rendered by the circle surface. When NULL is passed as a surface parameter, the new circle object is managed and rendered by itself.
        
 
         Evas_Object *datetime;
 Evas_Object *circle_datetime;
@@ -58,7 +59,7 @@ circle_datetime = eext_circle_object_datetime_add(datetime, surface);
 
 
        Activating a Rotary Event
        
 
-
        You can activate and deactivate the circle datetime by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle datetime can receive the rotary event. Otherwise, the circle datetime cannot receive the rotary event.
        
+
        To activate and deactivate the circle datetime, use the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle datetime can receive the rotary event. Otherwise, the circle datetime cannot receive the rotary event.
        
 
         eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
 
        
@@ -69,9 +70,9 @@ eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
 
          
 	
        • default
          • 
 
        
-
        When created, the circle datetime has default style automatically.
        
+
        When created, the circle datetime automatically has the default style.
        
 
-
        The circle datetime objects support the following circle object API calls:
        
+
        The circle datetime objects support the following circle object functions:
        
 
          
 
        • eext_circle_object_line_width_set()
          • 
 
        • eext_circle_object_line_width_get()
          • 
@@ -87,7 +88,7 @@ eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
 
        • default: Default circle item that draws a marker.
          • 
 
        
 
-
        You can change the properties of the items by using the eext_circle_object_item* APIs.
         
+
        You can change the item properties by using the eext_circle_object_item_XXX() functions.
         
 
        For more information, see the Efl Extension Circle Datetime API.
        
 
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_genlist_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_genlist_wn.htm
index 12a5ddf..6144c22 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_genlist_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_genlist_wn.htm
@@ -48,7 +48,7 @@
 
 
        Creating a Circle Genlist
        
 
-
        A genlist and a surface are necessary when creating the circle genlist. The circle genlist is added with the eext_circle_object_genlist_add() function.
        
+
        A genlist and a surface are necessary when creating the circle genlist. Add a circle genlist with the eext_circle_object_genlist_add() function.
        
 
         Evas_Object *genlist, *circle_genlist, *parent;
 
@@ -58,30 +58,33 @@ circle_genlist = eext_circle_object_genlist_add(genlist, surface);
 
 
        Configuring the Circle Genlist
        
 
-
        You can set the circle genlist scroller policy by using the eext_circle_object_genlist_scroller_policy_set() function.
        
+
        Set the circle genlist scroller policy by using the eext_circle_object_genlist_scroller_policy_set() function: 
        
 
         eext_circle_object_genlist_scroller_policy_set(circle_genlist, 
                                                ELM_SCROLLER_POLICY_OFF, 
                                                ELM_SCROLLER_POLICY_ON);
 
        
-
        This sets the scrollbar visibility policy of a given scroller. 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, and ELM_SCROLLER_POLICY_OFF turns it off. This applies to the horizontal and vertical scrollbars respectively.
        
-
        The following enum values are available for circle genlist.
        
+
        This example sets the scrollbar visibility policy of a given scroller. This applies to the horizontal and vertical scrollbars respectively.
        
+
        The following enumerator values are available for circle genlist:
        
 
          
-
        • ELM_SCROLLER_POLICY_AUTO
          • 
-
        • ELM_SCROLLER_POLICY_ON
          • 
-
        • ELM_SCROLLER_POLICY_OFF
          • 
+
        • ELM_SCROLLER_POLICY_AUTO
+
          The scrollbar is made visible if it is needed, and otherwise is kept hidden.
          • 
+
        • ELM_SCROLLER_POLICY_ON
+
          The scrollbar is on all the time.
          • 
+
        • ELM_SCROLLER_POLICY_OFF
+
          The scrollbar is off.
          • 
 
        
 
 
        Activating a Rotary Event
        
 
-
        You can activate and deactivate the circle genlist by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle genlist can receive the rotary event. Otherwise, the circle genlist cannot receive the rotary event.
        
+
        To activate and deactivate the circle genlist, use the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle genlist can receive the rotary event.
        
 
         eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
 
        
 
 
        Using the Circle Object Property
        
 
-
        Circle genlist objects support the following circle object API calls:
        
+
        Circle genlist objects support the following circle object functions:
        
 
          
 
        • eext_circle_object_line_width_set()
          • 
 
        • eext_circle_object_line_width_get()
          • 
@@ -92,12 +95,12 @@ eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
 
        • eext_circle_object_disabled_set()
          • 
 
        • eext_circle_object_disabled_get()
          • 
 
        
-
        A circle genlist has the following item:
        
+
        Circle genlist has the following items:
        
 
          
-
        • default: Default circle item. It draws vertical scroll bar.
          • 
+
        • default: Default circle item. It draws a vertical scroll bar.
          • 
 
        • vertical,scroll,bg: Vertical scroll background circle item.
          • 
 
        
-
        You can change the properties of the items by using the eext_circle_object_item* APIs.
        
+
        You can change the item properties by using the eext_circle_object_item_XXX() functions.
        
 
        For more information, see the Efl Extension Circle Genlist API.
        
 
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_object_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_object_wn.htm
index 6132405..fb2d508 100644
--- a/org.tizen.ui.practices/html/native/efl/component_circ_object_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_object_wn.htm
@@ -51,14 +51,15 @@
 
 
        Creating a Circle Object
        
 
-
        You can use the eext_circle_object_add() function to create a circle object. When creating a circle object, you can choose whether the circle object is rendered by itself or by the circle surface. If the circle surface is passed as an argument, a circle object connected with circle surface is created, and it is rendered by the circle surface.
        
+
        Use the eext_circle_object_add() function to create a circle object.
        
+
        When creating a circle object, you can choose whether the circle object is rendered by itself or by the circle surface. If the circle surface is passed as a parameter, a circle object connected with circle surface is created, and it is rendered by the circle surface.
        
 
         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 
        
 
-
        When NULL is passed as a surface argument, the new circle object is managed and rendered by itself. Here, a circle object without a circle surface is created and showed in a size of 360 x 360.
        
+
        When NULL is passed as a surface parameter, the new circle object is managed and rendered by itself. In the following example, a circle object without a circle surface is created and showed in a size of 360 x 360.
        
 
         Evas_Object *circle_obj;
 
@@ -69,42 +70,62 @@ evas_object_show(circle_obj);
 
 
        Setting the Line Width
        
 
-
        You can set the line width of the circle object by using the eext_circle_object_line_width_set() function. Here, circle object with a surface is created and its line width set to 20. You can get the current line width of a circle object by using the eext_circle_object_line_width_get() function.
        
+
        To set the line width:
        
+
          
+
        • 
+
          Set the line width of the circle object with the eext_circle_object_line_width_set() function.
          
+
          In the following example, a circle object with a surface is created and its line width set to 20. You can get the current line width of a circle object with the eext_circle_object_line_width_get() function.
          
 
           Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_line_width_set(circle_obj, 20);
 
          
-
-
          You can set the line width of a certain item in a circle object by using the eext_circle_object_item_line_width_set() function. If the name of the item is passed as default, it works the same way as the eext_circle_object_line_width_set() function. Similar to the above example, a circle object with a surface is created and its line width is set to 20. You can get the current line width of the item by using the eext_circle_object_item_line_width_get() function.
          
+
          • 
+
        • 
+
          Set the line width of a certain item in a circle object with the eext_circle_object_item_line_width_set() function.
          
+
          If the name of the item is passed as default, it works the same way as the eext_circle_object_line_width_set() function. Similar to the above example, a circle object with a surface is created and its line width is set to 20. You can get the current line width of the item with the eext_circle_object_item_line_width_get() function.
          
 
          Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_line_width_set(circle_obj, "default", 20);
 
          
+
          • 
+
        
 
 
        Setting the Angle
        
 
-
        You can set the angle of the circle object by using the eext_circle_object_angle_set() function. Here, circle object with surface is created and its angle set to a 45.0 degree angle. You can get the current angle of a circle object by using the eext_circle_object_angle_get() function.
        
+
        To set the angle:
        
+
          
+
        • 
+
          Set the angle of the circle object with the eext_circle_object_angle_set() function.
          
+
          In the following example, a circle object with surface is created and its angle set to a 45.0 degree angle. You can get the current angle of a circle object with the eext_circle_object_angle_get() function.
          
 
           Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_angle_set(circle_obj, 45.0);
 
          
-
-
          You can set the angle of a certain item in a circle object by using the eext_circle_object_item_angle_set() function. If name of the item is passed as default, it works the same way as eext_circle_object_angle_set() function. Similar to the above example, a circle object with surface is created and its angle is set to a 45.0 degree angle. You can get the current angle of the item by using the eext_circle_object_item_angle_get() function.
          
+
          • 
+
        • 
+
          Set the angle of a certain item in a circle object with the eext_circle_object_item_angle_set() function.
          
+
          If the name of the item is passed as default, it works the same way as eext_circle_object_angle_set() function. Similar to the above example, a circle object with surface is created and its angle is set to a 45.0 degree angle. You can get the current angle of the item with the eext_circle_object_item_angle_get() function.
          
 
           Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
 
          
+
          • 
+
        
 
 
        Setting the Angle Offset
        
 
-
        You can set the angle offset of the circle object by using the eext_circle_object_angle_offset_set() function. Here, a circle object with a 45.0 degree angle is created and its angle offset set to 30.0 degrees. As a result, the circle object has an arch of 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees. You can get the current angle offset of a circle object by using the eext_circle_object_angle_offset_get() function.
        
+
        To set the angle offset:
        
+
          
+
        • 
+
          Set the angle offset of the circle object with the eext_circle_object_angle_offset_set() function.
          
+
          In the following example, a circle object with a 45.0 degree angle is created and its angle offset set to 30.0 degrees. As a result, the circle object has an arch of 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees. You can get the current angle offset of a circle object with the eext_circle_object_angle_offset_get() function.
          
 
           Evas_Object *circle_obj;
 
@@ -112,8 +133,10 @@ circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_angle_set(circle_obj, 45.0);
 eext_circle_object_angle_offset_set(circle_obj, 30.0);
 
          
-
-
          You can set the angle offset of a certain item in a circle object by using the eext_circle_object_item_angle_offset_set() function. If name of the item is passed as default, it works the same way as eext_circle_object_angle_offset_set() function. The following code works the same way as in the above example. You can get the current angle of the item by using the eext_circle_object_item_angle_offset_get() function.
          
+
          • 
+
        • 
+
          Set the angle offset of a certain item in a circle object with the eext_circle_object_item_angle_offset_set() function.
          
+
          If the name of the item is passed as default, it works the same way as eext_circle_object_angle_offset_set() function. The following code works the same way as in the above example. You can get the current angle of the item with the eext_circle_object_item_angle_offset_get() function.
          
 
           Evas_Object *circle_obj;
 
@@ -121,111 +144,156 @@ circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_angle_set(circle_obj, "default", 45.0); 
 eext_circle_object_item_angle_offset_set(circle_obj, "default", 30.0);
 
          
+
          • 
+
        
 
 
        Setting the Minimum and Maximum Angle
        
 
-
        You can set the minimum and maximum angle of the circle object by using the eext_circle_object_angle_min_max_set() function. Here, a circle object with a surface is created and its minimum angle set to 0.0 degrees and maximum angle to 90.0 degrees. You can get the current minimum and maximum angle of the circle object by using the eext_circle_object_angle_min_max_get() function.
        
+
        To set the minimum and maximum angle:
        
+
          
+
        • 
+
          Set the minimum and maximum angle of the circle object with the eext_circle_object_angle_min_max_set() function.
          
+
          In the following example, a circle object with a surface is created and its minimum angle set to 0.0 degrees and maximum angle to 90.0 degrees. You can get the current minimum and maximum angle of the circle object with the eext_circle_object_angle_min_max_get() function.
          
 
           Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
 
          
-
-
          You can set the minimum and maximum angles of a certain item in a circle object by using the eext_circle_object_item_angle_min_max_set() function. If name of the item is passed as default, it works the same way as the eext_circle_object_angle_min_max_set() function. Similar to the above example, a circle object with a minimum and maximum angles of 0.0 and 90.0 is created. You can get the current minimum and maximum angle of the item by using the eext_circle_object_item_angle_min_max_get() function.
          
+
          • 
+
        • 
+
          Set the minimum and maximum angles of a certain item in a circle object with the eext_circle_object_item_angle_min_max_set() function.
          
+
          If the name of the item is passed as default, it works the same way as the eext_circle_object_angle_min_max_set() function. Similar to the above example, a circle object with a minimum and maximum angles of 0.0 and 90.0 is created. You can get the current minimum and maximum angle of the item with the eext_circle_object_item_angle_min_max_get() function.
          
 
           Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_angle_min_max_set(circle_obj, "default", 0.0, 90.0);
-
           
+
        
+
        • 
+
      Setting the Minimum and Maximum Value
      
 
-
      You can set the minimum and maximum values of the circle object by using the eext_circle_object_value_min_max_set() function. Here, a circle object with a surface is created and its minimum value is set to 0.0 degrees and maximum value to 10.0 degrees. You can get the current minimum and maximum value of the circle object by using the eext_circle_object_value_min_max_get() function.
      
+
      To set the maximum and minimum value:
      
+
        
+
      • 
+
        Set the minimum and maximum values of the circle object with the eext_circle_object_value_min_max_set() function.
        
+
        In the following example, a circle object with a surface is created and its minimum value is set to 0.0 degrees and maximum value to 10.0 degrees. You can get the current minimum and maximum value of the circle object with the eext_circle_object_value_min_max_get() function.
        
 
         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
 
        
-
-
        You can set the value of a certain item in a circle object by using the eext_circle_object_item_angle_min_max_set() function. If name of the item is passed as default, it works the same way as the eext_circle_object_value_min_max_set() function. Similar to the above example, a circle object with a minimum and maximum value of 0.0 to 10.0 degrees is created. You can get the current minimum and maximum values of the item by using the eext_circle_object_item_value_min_max_get() function.
        
+
        • 
+
      • 
+
        Set the value of a certain item in a circle object with the eext_circle_object_item_angle_min_max_set() function.
        
+
        If the name of the item is passed as default, it works the same way as the eext_circle_object_value_min_max_set() function. Similar to the above example, a circle object with a minimum and maximum value of 0.0 to 10.0 degrees is created. You can get the current minimum and maximum values of the item with the eext_circle_object_item_value_min_max_get() function.
        
 
         
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_value_min_max_set(circle_obj, "default", 0.0, 10.0);
 
        
+
        • 
+
      Setting the Value
      
 
-
      You can set the value of the circle object by using the eext_circle_object_value_set() function. Here, a circle object with a surface is created and its value set to 5.0. You can get the current value of the circle object by using the eext_circle_object_value_get() function.
      
+
      To set the value:
      
+
+
      
      
   
 
 
 
 
 
 
 
 
 
 
       
+ 
+     
+      
+     
+     
+      
+     
+    
+  
      Note
      The value cannot be lower than the minimum value or higher than the maximum value.
        
+
        
+
      • 
+
        Set the value of the circle object with the eext_circle_object_value_set() function.
        
+
        In the following example, a circle object with a surface is created and its value set to 5.0. You can get the current value of the circle object with the eext_circle_object_value_get() function.
        
 
         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_value_set(circle_obj, 5.0);
 
        
-
-
        You can set the value of a certain item in a circle object by using the eext_circle_object_item_value_set() function. If name of the item is passed as default, it works the same as the eext_circle_object_value_set() function. Similar to the above example, a circle object with a surface is created and its value is set to 5.0 degree angle. You can get the current value of the item by using the eext_circle_object_item_value_get() function.
        
+
        • 
+
      • 
+
        Set the value of a certain item in a circle object with the eext_circle_object_item_value_set() function.
        
+
        If the name of the item is passed as default, it works the same as the eext_circle_object_value_set() function. Similar to the above example, a circle object with a surface is created and its value is set to 5.0 degree angle. You can get the current value of the item with the eext_circle_object_item_value_get() function.
        
 
         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_value_set(circle_obj, "default", 5.0);
 
        
+
        • 
+
      
+
 
- 
- 
-     
-      
-     
-     
-      
-     
-    
-  
      Note
      The value cannot be lower than the minimum value or higher than the maximum value.
        
 
 
      Setting the Color
      
 
-
      You can set the color of the circle object by using 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. Here, a circle object with a surface is created and its color set to blue. You can get the current color of circle object by using the eext_circle_object_color_get() function.
      
+
      To 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.
        
 
         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
 
        
-
-
        You can set the color of a certain item in a circle object by using the eext_circle_object_item_color_set() function. If 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 by using the eext_circle_object_item_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.
        
 
         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);
 
        
+
        • 
+
      
 
 
      Setting the Radius
       
 
-
      You can set the radius of the circle object by using the eext_circle_object_radius_set() function. Here, a circle object with radius of 50.0 is created. You can get the current radius of the circle object by using the eext_circle_object_radius_get() function.
      
+
      To 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.
        
 
         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_radius_set(circle_obj, 50.0);
 
        
-
-
        You can set the radius of a certain item in a circle object by using the eext_circle_object_item_radius_set() function. If 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 by using the eext_circle_object_item_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.
        
 
         Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_item_radius_set(circle_obj, "default", 50.0);
 
        
+
        • 
+
      
 
 
      Disabling a Circle Object
      
 
-
      You can disable the circle object by using the eext_circle_object_disabled_set() function. Here, a circle object is disabled. You can get the current disabled status of circle object by using the eext_circle_object_disabled_get() function.
      
+
      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.
      
 
       Evas_Object *circle_obj;
 
@@ -233,13 +301,14 @@ circle_obj = eext_circle_object_add(parent, surface);
 eext_circle_object_disabled_set(circle_obj, EINA_TRUE);
 
      
 
-
      You can enable a disabled circle object by using the eext_circle_object_disabled_set() function with EINA_FALSE argument.
      
+
      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);
 
      
 
 
 
+
 
 
 
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 a2730be..8de875d 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
@@ -42,9 +42,9 @@
 
 
      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 APIs, because the more option handle is an elm_layout object.
      
+
      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 basic view of the more option is shown on the left in the following figure. It simply contains a cue button. When the cue button is clicked, the view including the selector appears from the cue location (shown on the right in the figure).
      
+
      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 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.
      
 
@@ -107,7 +107,7 @@ eext_more_option_direction_set(more_option, EEXT_MORE_OPTION_DIRECTION_RIGHT);
 
 
      Adding a More Option Item
      
 
-
      To add an item, append it with the eext_more_option_item_append() function and set its attributes:
      
+
      To add an item, use the eext_more_option_item_append() function and set the item attributes:
      
 
 
       {
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 2b01fea..b0bc1c9 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
@@ -49,9 +49,9 @@
      4. +

      This UI component inherits from the layout component, which means that layout component functions can also be used on the colorselector component.

      - -

      This UI component inherits from the layout component, so all functions concerning the layout component can also be used on the colorselector component.

      +

      For more information, see the Colorselector API.

      Figure: Colorselector component

      @@ -62,7 +62,7 @@

      Adding a Colorselector Component

      -

      The following example shows how to create a colorselector object.

      +

      To create a colorselector object, use the elm_colorselector_add() function:

       Evas_Object *colorsel, *parent;
@@ -72,13 +72,13 @@ colorsel = elm_colorselector_add(parent);
 
 
      Setting the Colorselector Modes
      
 
-
      The following example shows how to set the mode of the colorselector to the palette mode.
      
+
      To set the mode of the colorselector to the palette mode:
      
 
 
       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. You then add three colors in mypalette: red, green, and blue.
      
+
      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.
      
 
 
       elm_colorselector_palette_name_set(colorsel, "mypalette");
@@ -93,7 +93,7 @@ elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
 elm_colorselector_palette_name_set(colorsel, "default");
 
      
 
-
      When the user clicks on the color elements, the element changes the color that is set to the colorselector component. You can use the following function to retrieve the current selected color.
      
+
      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.
      
 
       int r, g, b, a;
 
@@ -105,9 +105,9 @@ elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
 
      You can register callbacks on the following signals:
      
 
 
        
-
      • changed - The color value changes on the selector. event_info is NULL.
        • 
-
      • color,item,selected - The user clicks on a color item. The event_info parameter of the callback is the selected color item.
        • 
-
      • color,item,longpressed - The user long presses on a color item. The event_info parameter of the callback contains the selected color item.
        • 
+
      • 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.
        • 
 
      
 
 
      The following example shows how to register a callback on the changed signal.
      
@@ -118,7 +118,8 @@ elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
 
 // Callback function for the "changed" signal
 // This callback is called when the colorselector value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The color has changed\n");
 }
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 aaf73fa..7dfb843 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
@@ -44,6 +44,8 @@
 
 
      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: Ctxpopup component
       
   
      Ctxpopup component
       
   
@@ -52,7 +54,7 @@
 
 
      Adding a Ctxpopup Component
      
 
-
      A ctxpopup can be created with the elm_ctxpopup_add() function, and when shown, it automatically chooses an area inside its parent object's view (set using elm_ctxpopup_hover_parent_set()) to optimally fit into it.
      
+
      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.
      
 
 
       Evas_Object *ctxpopup, *parent;
@@ -77,7 +79,7 @@ ctxpopup = elm_ctxpopup_add(parent);
     
      Figure: Ctxpopup default (left) and more/default (right) style
       
   
      Ctxpopup default style Ctxpopup more/default style
       
   
-
      The following example shows how to set the more/default style.
      
+
      To set the more/default style:
      
 
 
       elm_object_style_set(ctxpopup, "more/default");
@@ -85,30 +87,42 @@ elm_object_style_set(ctxpopup, "more/default");
 
 
      Configuring the Ctxpopup
      
 
-
      The ctxpopup orientation can be set with elm_ctxpopup_horizontal_set(). Here it is set to horizontal.
      
+
      To configure the ctxpopup:
      
+
        
+
      • 
+
        Set the ctxpopup orientation with the elm_ctxpopup_horizontal_set() function. In the following example, it is set to horizontal.
        
 
         elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
 
        
-
-
        Ctxpopup can be hidden automatically when its parent is resized. This 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.
        
+
        • 
+
      • 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.
        
 
         elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 
        
-
-
        The ctxpopup can set the priority of the direction where it appears from:
        
+
        • 
+
      • 
+
        Set the priority of the direction where the ctxpopup appears from:
        
 
 
         elm_ctxpopup_direction_priority_set(ctxpopup, ELM_CTXPOPUP_DIRECTION_UP, ELM_CTXPOPUP_DIRECTION_LEFT,
                                     ELM_CTXPOPUP_DIRECTION_DOWN, ELM_CTXPOPUP_DIRECTION_RIGHT);
 
        
-
        You can hide the ctxpopup with an animation by calling the elm_ctxpopup_dismiss() function:
        
+
        • 
+
      • 
+
        Hide the ctxpopup with an animation by calling the elm_ctxpopup_dismiss() function:
        
 
         elm_ctxpopup_dismiss(ctxpopup);
 
        
+
        • 
+
      
 
 
      Managing the Ctxpopup Items
      
 
-
      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):
      
+
      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).
        
 
 
         Elm_Object_Item *it;
@@ -116,13 +130,15 @@ Evas_Object *icon;
 
 it = elm_ctxpopup_item_append(ctxpopup, "test", icon, _ctxpopup_item_cb, NULL);
 
        
-
-
        The item label and icon can be changed 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:
        
+
        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:
        
 
 
        elm_object_item_part_text_set(it, "default", "New label");
 
        
-
-
        And its icon is modified to the standard home icon:
        
+
        3. 
+
      3. 
+
        Set its icon to the standard home icon:
        
 
 
         Evas_Object *home_icon = elm_icon_add(ctxpopup);
@@ -130,7 +146,8 @@ elm_icon_standard_set(home_icon, "home");
 
 elm_object_item_part_content_set(it, "icon", home_icon);
 
        
-
+
        4. 
+
      4. 
 
        The clicked callback is called when the item is clicked:
        
 
         static void
@@ -139,6 +156,8 @@ _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
      
 
@@ -151,7 +170,8 @@ _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
 
 // Callback function for the "dismissed" signal
 // This callback is called when the ctxpopup is dismissed
-void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
 }
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 d371cd0..01c50bb 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
@@ -43,8 +43,9 @@
 
 
      This feature is supported in wearable applications only.
      
 
-
      Ctxpopup is a contextual popup that can show a list of items.
      
+
      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
       
   
@@ -53,7 +54,7 @@
 
 
      Adding a Ctxpopup Component
      
 
-
      A ctxpopup can be created with the elm_ctxpopup_add() function, and when shown, it automatically chooses an area inside its parent object's view (set using elm_ctxpopup_hover_parent_set()) to optimally fit into it.
      
+
      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.
      
 
 
       Evas_Object *ctxpopup, *parent;
@@ -75,25 +76,33 @@ ctxpopup = elm_ctxpopup_add(parent);
 
 
 
-
      The following example shows how to set the default style.
      
+
      To set the default style:
      
 
       elm_object_style_set(ctxpopup, "default");
 
      
 
 
      Configuring the Ctxpopup
      
-
-
      The context popup orientation can be set with elm_ctxpopup_horizontal_set(). Here it is set to horizontal.
      
+
      To configure the ctxpopup:
      
+
        
+
      • 
+
        Set the ctxpopup orientation with the elm_ctxpopup_horizontal_set() function. In the following example, it is set to horizontal.
        
 
         elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
 
        
-
-
        Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden. 
        
+
        • 
+
      • 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.
        
 
         elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 
        
+
        • 
+
      
 
 
      Managing the Ctxpopup Items
      
 
+
      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.
        
 
         Elm_Object_Item *it;
@@ -101,7 +110,8 @@ 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
@@ -110,22 +120,27 @@ _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
    dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
 }
 
        
-
-
        After that the item label is set to New label.
        
-
        elm_object_item_part_text_set(it, "default", "New label");
+
        3. 
+
      3. 
+
        Set the item label to New label:
        
+
        +elm_object_item_part_text_set(it, "default", "New label");
 
        
-
-
        And its icon is modified to the standard home icon.
        
+
        4. 
+
      4. 
+
        Set its 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);
 
        
+
        5. 
+
      
 
 
      Using the Ctxpopup Callbacks
      
 
-
      The context popup emits the dismissed signal when it is dismissed. You can register a callback to this signal. The event_info parameter is NULL.
      
+
      The ctxpopup emits the dismissed signal when it is dismissed. You can register a callback to this signal. The event_info parameter is NULL.
      
 
 
       {
@@ -134,7 +149,8 @@ elm_object_item_part_content_set(it, "icon", home_icon);
 
 // Callback function for the "dismissed" signal
 // This callback is called when the ctxpopup is dismissed
-void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
 }
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 1296c0c..2af1242 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
@@ -44,6 +44,8 @@
 
 
      The datetime component displays and adds date and time values.
      
 
+
      For more information, see the Datetime API.
      
+
 
      Figure: Datetime selection
       
 
       Datetime selection 
       
  
@@ -52,14 +54,14 @@
 
 
      Adding a Datetime Component
      
 
-
      The UI component is created with elm_datetime_add(). It is possible to select the visible fields with elm_datetime_field_visible_set(). The following fields can be controlled:
      
+
      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:
      
   
        
-   
      • ELM_DATETIME_YEAR: the year field
        • 
-   
      • ELM_DATETIME_MONTH: the month field
        • 
-   
      • ELM_DATETIME_DATE: the date field
        • 
-   
      • ELM_DATETIME_HOUR: the hour field
        • 
-   
      • ELM_DATETIME_MINUTE: the minute field
        • 
-   
      • ELM_DATETIME_AMPM: the AM/PM field
        • 
+   
      • ELM_DATETIME_YEAR: Year field
        • 
+   
      • ELM_DATETIME_MONTH: Month field
        • 
+   
      • ELM_DATETIME_DATE: Date field
        • 
+   
      • ELM_DATETIME_HOUR: Hour field
        • 
+   
      • ELM_DATETIME_MINUTE: Minute field
        • 
+   
      • ELM_DATETIME_AMPM: AM/PM field
        • 
   
      
 
 
      The following example shows how to create a datetime component and set the HOUR and MINUTE fields visible.
      
@@ -87,7 +89,7 @@ elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
    
    4. time_layout_24hr
      5. 
   
 
-
      The following example creates the date_layout style:
      
+
      To set the date_layout style to the datetime component:
      
 
 
       elm_object_style_set(datetime, "date_layout");
@@ -95,17 +97,17 @@ elm_object_style_set(datetime, "date_layout");
 
 
      Setting the Datetime Format
      
 
-
      The format of the date and time can be configured with elm_datetime_format_set() using a combination of allowed Libc date format specifiers. In the following example the format is set to DD MM YY.
      
+
      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.
      
 
 
       elm_datetime_format_set(datetime, "%d%B%Y");
 
      
 
-
      Refer to the API documentation for a complete list of all the options available.
      
+
      For a complete list available options, 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.
      
+
      A callback can be registered on the changed signal to detect when the datetime field values are changed. The event_info parameter is NULL.
      
 
 
       {
@@ -114,7 +116,8 @@ elm_datetime_format_set(datetime, "%d%B%Y");
 
 // Callback function for the "changed" signal
 // This callback is called when the datetime fields change
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
 }
      
@@ -125,12 +128,12 @@ void changed_cb(void *data, Evas_Object *obj, void *event_info)
 
      UX Issue Since Tizen 2.3
      
 
 
        
-  
      • date_layout (default): Year, Month, Day
        • 
-  
      • time_layout: Hour, Minute, AM/PM button
        • 
-  
      • time_layout_24hr: Hour, Minute
        • 
+  
      • date_layout (default): Year, month, day
        • 
+  
      • time_layout: Hour, minute, AM/PM button
        • 
+  
      • time_layout_24hr: Hour, minute
        • 
 
      
  
-
      Basically, 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.
      
+
      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 ab58ada..1b4b44b 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
@@ -44,6 +44,7 @@
 
 
      The datetime component displays and adds date and time values.
      
 
+
      For more information, see the Datetime API.
      Figure: Datetime selection
      Datetime selection 
       
@@ -53,15 +54,14 @@
 
 
      Adding a Datetime Component
      
 
-
      The UI component is created with elm_datetime_add().
      
-
      The following fields can be controlled:
      
+
      Create the datetime component with the elm_datetime_add() function. The following fields can be controlled:
        
-   
      • ELM_DATETIME_YEAR: the year field
        • 
-   
      • ELM_DATETIME_MONTH: the month field
        • 
-   
      • ELM_DATETIME_DATE: the date field
        • 
-   
      • ELM_DATETIME_HOUR: the hour field
        • 
-   
      • ELM_DATETIME_MINUTE: the minute field
        • 
-   
      • ELM_DATETIME_AMPM: the AM/PM field
        • 
+   
      • ELM_DATETIME_YEAR: Year field
        • 
+   
      • ELM_DATETIME_MONTH: Month field
        • 
+   
      • ELM_DATETIME_DATE: Date field
        • 
+   
      • ELM_DATETIME_HOUR: Hour field
        • 
+   
      • ELM_DATETIME_MINUTE: Minute field
        • 
+   
      • ELM_DATETIME_AMPM: AM/PM field
        • 
   
      Using the Datetime Styles
      
@@ -72,23 +72,25 @@
    
    5. timepicker_layout
      6. 
 
-
      The following example creates the datepicker_layout style:
      
+
      To set the datepicker_layout style to the datetime component:
       elm_object_style_set(datetime, "datepicker_layout");
 
      Setting the Datetime Format
      
 
-
      The format of the date and time can be configured with elm_datetime_format_set() using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.
      
+
      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.
       elm_object_style_set(datetime, "timepicker_layout");
 elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M");
 
      
-
      Please refer to the API documentation for a complete list of all the options available.
      
+
+
      For a complete list available options, 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.
      
+
      A callback can be registered on the changed signal to detect when the datetime field values are changed. The event_info parameter is NULL.
      
+
 
       {
    evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
@@ -96,7 +98,8 @@ elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M");
 
 // Callback function for the "changed" signal
 // This callback is called when the datetime fields change
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
 }
      
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 4848da8..6611750 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
@@ -53,14 +53,15 @@
 
 
      The entry component is a box where the user can enter text. It supports the following features:
        
-   
      • password mode
        • 
-   
      • filtering text
        • 
-   
      • read/write from a file
        • 
-   
      • theme style overrides
        • 
+   
      • Password mode
        • 
+   
      • Filtering text
        • 
+   
      • Read/write from a file
        • 
+   
      • Theme style overrides
        • 
   
      
    
-
      The entry component includes an Evas Textblock in it. This means that entry supports thee 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.
      Figure: Entry component
       Entry component Entry component 
       
@@ -70,8 +71,7 @@
    
 
      Adding an Entry Component
      
 
-
      The entry component is created with the elm_entry_add() function, and the text inside the entry can be set with elm_entry_entry_set().
      
-
+
      Create the entry component with the elm_entry_add() function, and set the text inside it with the elm_entry_entry_set() function:
       Evas_Object *entry, *parent;
 
@@ -81,22 +81,27 @@ elm_entry_entry_set(entry, "A short text.");
 
 
      Using the Text Editor
      
 
-
      You can append text to the end of existing content.
      
+
      To use the text editor:
      
+
        
+
      • 
+
        Append text to the end of existing content:
        
 
 
         elm_entry_entry_append(entry, "END");
 
        
-
-
        You can also insert text at the current cursor position.
        
+
        • 
+
      • 
+
        Insert text at the current cursor position:
        
 
 
         elm_entry_entry_insert(entry, "CURSOR");
 Eina_Bool Empty = elm_entry_is_empty(entry);
 
        
 
-
        Call elm_entry_is_empty() to see whether the entry is empty. Here, the boolean variable Empty returns EINA_FALSE.
        
-
-
        By default, the user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.
        
+
        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);
@@ -112,6 +117,8 @@ elm_entry_editable_set(entry, EINA_FALSE);
      
    
      
     
 
  
 
   
 
 
   
 
 
 
 
 
 
   
    
  
 
  
   
        
+ 
+ 
  
 
      Setting the Password Mode
      
 
@@ -125,58 +132,61 @@ elm_entry_password_set(entry, EINA_TRUE);
 
 
      Entry Line Modes and Wrapping
      
 
-
      The entry component has two line modes:
      
+
      The entry component has 2 line modes:
      
   
        
-   
      • single line mode
        • 
-   
      • multiline mode
        • 
+   
      • Single line mode
        • 
+   
      • Multiline mode
        • 
   
      
 
-
      First, set the entry to the single line mode:
      
-
+
      To use entry line modes:
      
+
        
+
      • 
+
        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.
        
-
-
        When the entry is set to the multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates 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:
        
 
         elm_entry_single_line_set(entry, EINA_FALSE);
 elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
 
        
 
-
        In multiline entries, elm_entry_line_wrap_set() 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:
        
+
        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
      
 
-
      Text selections can be made with different functions:
      
+
      To select text:
      
 
        
-
      • To select all the content of the entry component:
+
      • Select all the content of the entry component:
 
         elm_entry_select_all(entry);
 
        
 
        • 
 
-
      • To deselect the current selection:
+
      • Deselect the current selection:
 
         elm_entry_select_none(entry);
 
        
 
        • 
 
-
      • To select part of the text, use elm_entry_select_region_set(). The following code selects the first twenty characters of the entry content.
+
      • 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.
 
         elm_entry_select_region_set(entry, 0, 20);
 
        
 
        • 
 
-
      • To retrieve the currently selected text in an entry:
+
      • Retrieve the currently selected text in an entry:
 
         const char *selection;
 
@@ -185,55 +195,61 @@ selection = elm_entry_selection_get(entry);
 
        • 
 
      
 
-
      If the entry text is empty, elm_entry_selection_get() returns NULL.
      
+
      If the entry text is empty, the elm_entry_selection_get() function returns NULL.
      
 
-
      You can copy or cut the selection to the clipboard.
      
+
      To manage the selection:
      
+
        
+
      1. 
+
        Copy or cut the selection to the clipboard.
        
 
         elm_entry_selection_cut(entry);
 
        
-
-
        The selection can be pasted in the same or a different entry.
        
+
        2. 
+
      2. 
+
        Paste the selection in the same or a different entry.
        
 
         elm_entry_selection_paste(entry);
 
        
+
        3. 
+
      
 
 
      Controlling 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 position can be modified by using several functions.
      
 
        
-
      • To move the cursor to the beginning of the entry:
+
      • Move the cursor to the beginning of the entry:
 
         elm_entry_cursor_begin_set(entry);
 
        
 
        • 
 
-
      • To move the cursor to the end of the entry:
+
      • Move the cursor to the end of the entry:
 
         elm_entry_cursor_end_set(entry);
 
        
 
        • 
 
-
      • To move the cursor one line down or up:
+
      • Move the cursor 1 line down or up:
 
         elm_entry_cursor_down(entry);
 elm_entry_cursor_up(entry);
 
        
 
        • 
-
      • To move the cursor one character to the left or right:
+
      • Move the cursor 1 character to the left or right:
 
         elm_entry_cursor_prev(entry);
 elm_entry_cursor_next(entry);
 
        
 
        • 
 
-
      • To 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);
 
        
 
        • 
 
      
 
-
      It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.
      
+
      The following example shows how to start a selection at the current cursor position, move 5 characters to the right and end the selection.
      
 
 
       elm_entry_cursor_selection_begin(entry);
@@ -300,7 +316,7 @@ 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 by using elm_entry_text_style_user_push(). 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 elm_entry_text_style_user_pop().
      
+
      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.
      
 
 
       Evas_Object *entry;
@@ -317,9 +333,9 @@ elm_entry_text_style_user_push(entry, "DEFAULT='font=Tizen:style=Light
 
      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 = 
+static Elm_Entry_Filter_Limit_Size 
+limit_size = 
 {
    .max_char_count = 8,
    .max_byte_count = 0
@@ -334,7 +350,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 = 
+static Elm_Entry_Filter_Accept_Set 
+accept_set = 
 {
    .accepted = NULL,
    .rejected = "+*-/"
@@ -365,7 +382,7 @@ elm_entry_file_save(entry);
 
 
      Using Entry Theme Content
      
 
-
      Two 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.
      
+
      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.
      
 
       Evas_Object *icon;
 
@@ -378,8 +395,8 @@ elm_object_part_content_set(entry, "end", icon);
 
 
      The default theme allows the use of the following text parts:
      
   
        
-   
      • default - text of the entry
        • 
-   
      • guide - placeholder of the entry
        • 
+   
      • 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.
      
@@ -437,7 +454,8 @@ elm_object_part_text_set(entry, "Hello World");
 
 // Callback function for the "focused" signal
 // This callback is called when the entry receive the focus
-void focused_cb(void *data, Evas_Object *obj, void *event_info)
+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_entry_wn.htm b/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm
index d22e00d..7ce955b 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
@@ -26,8 +26,8 @@
 			
    6. Adding an Entry Component
      7. 
 			
    7. Using the Text Editor
      8. 
 			
    8. Setting the Password Mode
      9. 
-			
    9. Entry Line Modes And Wrapping
      10. 
-			
    10. Selecting Text
      11. 
+			
    11. Entry Line Modes and Wrapping
      12. 
+			
    12. Selecting Text
      13. 
 			
    13. Controlling the Cursor
      14. 
 			
    14. Formatting Text
      15. 
 			
    15. Using Special Markups
      16. 
@@ -54,16 +54,17 @@
 
 
      The entry component is a box where the user can enter text. It supports the following features:
      
   
        
-   
      • text wrapping
        • 
-   
      • multiline
        • 
-   
      • scrolling
        • 
-   
      • formatted markup text
        • 
-   
      • password mode
        • 
-   
      • filtering text
        • 
-   
      • read/write from a file
        • 
-   
      • theme style overrides
        • 
+   
      • Text wrapping
        • 
+   
      • Multiline
        • 
+   
      • Scrolling
        • 
+   
      • Formatted markup text
        • 
+   
      • Password mode
        • 
+   
      • Filtering text
        • 
+   
      • Read/write from a file
        • 
+   
      • Theme style overrides
        • 
   
      
 
+  
      For more information, see the Entry API.
      
 
 
      Figure: Entry component
       
 
      Entry component 
       
@@ -76,7 +77,7 @@
   
 
      Adding an Entry Component
      
 
-
      The entry component is created with the elm_entry_add() function, and the text inside the entry can be set with elm_entry_entry_set().
      
+
      Create the entry component with the elm_entry_add() function, and set the text inside it with the elm_entry_entry_set() function:
      
 
       Evas_Object *entry, *parent;
 
@@ -86,19 +87,28 @@ elm_entry_entry_set(entry, "A short text.");
 
 
      Using the Text Editor
      
 
-
      You can append text to the end of existing content.
      
+
      To use the text editor:
      
+
        
+
      • 
+
        Append text to the end of existing content:
        
+
 
         elm_entry_entry_append(entry, "END");
 
        
+
        • 
+
      • 
+
        Insert text at the current cursor position:
        
 
-
        You can also insert text at the current cursor position.
        
 
         elm_entry_entry_insert(entry, "CURSOR");
 Eina_Bool Empty = elm_entry_is_empty(entry);
 
        
 
-
        Call elm_entry_is_empty() to see whether the entry is empty. Here, the boolean variable Empty returns EINA_FALSE.
        
-
        The user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.
        
+
        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);
 
        
@@ -113,6 +123,8 @@ elm_entry_editable_set(entry, EINA_FALSE);
      
     
     
+ 
        • 
+ 
      
  
 
      Setting the Password Mode
      
 
@@ -122,60 +134,63 @@ elm_entry_editable_set(entry, EINA_FALSE);
 elm_entry_password_set(entry, EINA_TRUE);
 
      
 
-
      Entry Line Modes And Wrapping
      
+
      Entry Line Modes and Wrapping
      
 
-
      The entry component has two line modes:
      
+
      The entry component has 2 line modes:
      
   
        
-   
      • single line mode
        • 
-   
      • multiline mode
        • 
+   
      • Single line mode
        • 
+   
      • Multiline mode
        • 
   
      
 
-
      First, set the entry in single line mode.
      
-
+
      To use entry line modes:
      
+
        
+
      • 
+
        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.
        
-
-
        When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.
        
-
+
        • 
+
      • 
+
        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:
        
 
         elm_entry_single_line_set(entry, EINA_FALSE);
 elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
 
        
 
-
        In multiline entries, elm_entry_line_wrap_set() 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:
        
+
        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
      
 
-
      Selecting Text
      
-
-
      Text selections can be made with different functions:
      
+
      To select text:
      
 
        
-
      • To select all the content of the entry component:
+
      • Select all the content of the entry component:
 
         elm_entry_select_all(entry);
 
        
 
        • 
 
-
      • To deselect the current selection:
+
      • Deselect the current selection:
 
         elm_entry_select_none(entry);
 
        
 
        • 
 
-
      • To select part of the text, use elm_entry_select_region_set(). The following code selects the first twenty characters of the entry content.
+
      • 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.
 
         elm_entry_select_region_set(entry, 0, 20);
 
        
 
        • 
 
-
      • To retrieve the currently selected text in an entry:
+
      • Retrieve the currently selected text in an entry:
 
         const char *selection;
 
@@ -184,55 +199,61 @@ selection = elm_entry_selection_get(entry);
 
        • 
 
      
 
-
      If the entry text is empty, elm_entry_selection_get() returns NULL.
      
+
      If the entry text is empty, the elm_entry_selection_get() function returns NULL.
      
 
-
      You can copy or cut the selection to the clipboard.
      
+
      To manage the selection:
      
+
        
+
      1. 
+
        Copy or cut the selection to the clipboard.
        
 
         elm_entry_selection_cut(entry);
 
        
-
-
        The selection can be pasted in the same or a different entry.
        
+
        2. 
+
      2. 
+
        Paste the selection in the same or a different entry.
        
 
         elm_entry_selection_paste(entry);
 
        
+
        3. 
+
      
 
 
      Controlling 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 position can be modified by using several functions.
      
 
        
-
      • To move the cursor to the beginning of the entry:
+
      • Move the cursor to the beginning of the entry:
 
         elm_entry_cursor_begin_set(entry);
 
        
 
        • 
 
-
      • To move the cursor to the end of the entry:
+
      • Move the cursor to the end of the entry:
 
         elm_entry_cursor_end_set(entry);
 
        
 
        • 
 
-
      • To move the cursor one line down or up:
+
      • Move the cursor 1 line down or up:
 
         elm_entry_cursor_down(entry);
 elm_entry_cursor_up(entry);
 
        
 
        • 
-
      • To move the cursor one character to the left or right:
+
      • Move the cursor 1 character to the left or right:
 
         elm_entry_cursor_prev(entry);
 elm_entry_cursor_next(entry);
 
        
 
        • 
 
-
      • To 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);
 
        
 
        • 
 
      
 
-
      It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.
      
+
      The following example shows how to start a selection at the current cursor position, move 5 characters to the right and end the selection.
      
 
       elm_entry_cursor_selection_begin(entry);
 
@@ -271,13 +292,14 @@ elm_entry_cursor_selection_end(entry);
 
 
      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 by using elm_entry_text_style_user_push(). 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 elm_entry_text_style_user_pop().
      
+
      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.
      
 
 
      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 = 
+static Elm_Entry_Filter_Limit_Size 
+limit_size = 
 {
    .max_char_count = 8,
    .max_byte_count = 0
@@ -291,9 +313,9 @@ 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 = 
+static Elm_Entry_Filter_Accept_Set 
+accept_set = 
 {
    .accepted = NULL,
    .rejected = "+*-/"
@@ -313,6 +335,7 @@ 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);
@@ -323,8 +346,7 @@ elm_entry_file_save(entry);
 
 
      Using Entry Theme Content
      
 
-
      Two 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.
      
-
+
      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.
      
 
       Evas_Object *icon;
 
@@ -337,8 +359,8 @@ elm_object_part_content_set(entry, "end", icon);
 
 
      The default theme allows the use of the following text parts:
      
   
        
-   
      • elm.text - text of the entry
        • 
-   
      • elm.guide - placeholder of the entry
        • 
+   
      • elm.text: Text of the entry
        • 
+   
      • elm.guide: Placeholder of the entry
        • 
   
      
 
 
      The following example shows how to set the placeholder text of the entry to Hello World.
      
@@ -387,6 +409,7 @@ elm_object_part_text_set(entry, "elm.guide", "Hello World");
 
      For signals, where event_info has not been explicitly described, it is set to NULL.
      
 
 
      The following example shows how to register a callback to the focused signal.
      
+
 
       {
    evas_object_smart_callback_add(entry, "focused", focused_cb, data);
@@ -394,12 +417,13 @@ elm_object_part_text_set(entry, "elm.guide", "Hello World");
 
 // Callback function for the "focused" signal
 // This callback is called when the entry receive the focus
-void focused_cb(void *data, Evas_Object *obj, void *event_info)
+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 ff32149..1992374 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
@@ -43,12 +43,14 @@
  
 
      The flip component can hold two Evas_Objects and allows the user flip between them using several pre-defined animations.
      
 
+
      For more information, see the Flip API.
      
+
 
      Figure: Flip hierarchy
       Flip hierarchy 
      Adding a Flip Component
      
 
-
      The following example shows how to create a flip component.
      
+
      To create a flip component, use the elm_flip_add() function:
       Evas_Object *flip, *parent, *content1, *content2;
@@ -64,12 +66,12 @@ elm_object_part_content_set(flip, "back", content2);
 
 
      Configuring Flip Animation
      
 
-
      Now you can run an flip animation.
      
+
      Run an flip animation:
      
 
       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. Several animations are available:
      
+
      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:
      
   
        
    
      • ELM_FLIP_ROTATE_X_CENTER_AXIS: Rotate the content around a horizontal axis.
        • 
    
      • ELM_FLIP_ROTATE_Y_CENTER_AXIS: Rotate the content around a vertical axis.
        • 
@@ -87,44 +89,48 @@ elm_flip_go(flip, ELM_FLIP_CUBE_UP);
 
 
        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 choose which animation appears on the interaction (rotation has been selected in the following example).
        
-
-
        -elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
-
        
-
-
        The available modes of interaction are
        
+
        To interact with the user:
        
+
          
+
        • 
+
          By default, the user cannot interact with the flip. You can set the interaction to be possible, but you have to choose which animation appears on the interaction.
          
+
          The following modes of interaction are available:
          
   
            
    
          • ELM_FLIP_INTERACTION_NONE: No interaction is allowed
            • 
    
          • ELM_FLIP_INTERACTION_ROTATE: Interaction causes a rotating animation
            • 
    
          • ELM_FLIP_INTERACTION_CUBE: Interaction causes a cube animation
            • 
    
          • ELM_FLIP_INTERACTION_PAGE: Interaction causes a page animation
            • 
   
          
-
+
          To set the rotation animation:
          
+
          +elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
+
          
+
          • 
+
        • 
 
          You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.
          
 
 
           elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
 elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
 
          
-
+
          • 
+
        • 
 
          You can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.
          
 
 
           elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
 elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
 
          
-
+
          • 
+
        
 
        Using the Flip Callbacks
        
 
-
        Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, event_info parameter is NULL.
        
-
-
        -"animate,begin" - A flip animation is started
-"animate,done" - A flip animation is finished
-
        
+
        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.
        
+
          
+
        • "animate,begin": A flip animation is started
          • 
+
        • "animate,done": A flip animation is finished
          • 
+
        
 
-
        You can register a callback on the "animation,begin" signal.
        
+
        To register a callback on the "animation,begin" signal:
        
 
 
         {
@@ -133,7 +139,8 @@ elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
 
 // Callback function for the "animate,begin" signal
 // This callback is called when the flip animation starts
-void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+anim_start_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Animation starts\n");
 }
        
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 3e6ca86..292cacb 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
@@ -44,6 +44,8 @@
  
 
        The flipselector component shows a set of text items one at a time. The user can flip up or down the selector to change the text on it.
        
 
+
        For more information, see the Flipselector API.
        
+
 
        Figure: Flipselector component
         
 
         Flipselector component 
         
 
@@ -52,14 +54,13 @@
 
 
        Adding a Flipselector Component
        
 
-
        The following example shows how to create a flipselector component:
        
+
        To create a flipselector component, use the elm_flipselector_add() function:
        
 
 
         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.
        
@@ -75,7 +76,8 @@ 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
-void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+it_select_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "flip_it selected\n");
 }
@@ -88,19 +90,19 @@ void it_select_cb(void *data, Evas_Object *obj, void *event_info)
 
        To change the values:
        
 
          
 
        • 
-
          The elm_flipselector_flip_next() function shows the next text:
          
+
          Show the next text using the elm_flipselector_flip_next() function:
          
 
           elm_flipselector_flip_next(flipseletor);
 
          
 
          • 
 
        • 
-
          The elm_flipselector_flip_prev() function shows the previous text:
          
+
          Show the previous text using the elm_flipselector_flip_prev() function:
          
 
           elm_flipselector_flip_prev(flipseletor);
 
          
 
          • 
 
        • 
-
          The elm_flipselector_item_selected_set() function shows the text of the specific item. 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. When this function sets EINA_FALSE to the selected item, the flipselector shows the text of the first item.
          
 
           elm_flipselector_item_selected_set(flip_it, EINA_TRUE);
 
          
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 4db9db8..a6db27a 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
@@ -42,12 +42,13 @@
 
 
          This feature is supported in mobile applications only.
          
 
-
          Gengrid component is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.
          
+
          Gengrid component is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. Similar to the genlist, callbacks are called at item creation or deletion.
          
 
-
          This UI component inherits from the layout component and implements the scroller interface. Because of this, the scroller and layout functions can be used with this UI component.
          
+
          The gengrid component inherits from the layout component and implements the scroller interface, which means that scroller and layout functions can be used with the gengrid component.
          
 
-
          A gengrid can display its items using a horizontal or vertical layout. In the first layout, the items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.
          
+
          For more information, see the Gengrid API.
          
 
+
          A gengrid can display its items using a horizontal or vertical layout. In the horizontal layout, the items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the vertical layout, items are set in rows from left to right.
          
 
 
          Figure: Gengrid component
           
 
           Gengrid component 
           
@@ -57,7 +58,7 @@
 
 
          Adding a Gengrid Component
          
 
-
          You can add a gengrid component with the following code.
          
+
          To add a gengrid component, use the elm_gengrid_add() function:
          
 
           Evas_Object *gengrid, *parent;
 gengrid = elm_gengrid_add(parent);
@@ -76,7 +77,7 @@ gengrid = elm_gengrid_add(parent);
 
          • default
            • 
 
        
 
-
        The following example shows how to use the popup gengrid style with the default item style:
        
+
        To use the popup gengrid style with the default item style:
        
 
         elm_object_style_set(gengrid, "popup");
 gic->item_style = "default";
@@ -167,34 +168,41 @@ _item_del(void *data, Evas_Object *obj)
 
 
        Managing Items
        
 
+
        To manage the items:
        
+
          
+
        • Add items:
 
          As with genlists, items can be added with the elm_gengrid_item_append(), elm_gengrid_item_prepend(), elm_gengrid_item_insert_before(), and elm_gengrid_item_insert_after() functions. With the gengrid, there is no need to pass the type parameters. They can be cleared with the elm_gengrid_clear() function.
          
-
-
          You can set the multiselection mode on.
          
+
          • 
+
        • 
+
          Select multiple items:
          
+
          To select multiple items, use the multiselection mode:
          
 
           elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
 
          
-
-
          When the multiselection mode is on, the selected items are retrieved with the elm_gengrid_selected_items_get() function. The function returns a list of all the selected items.
          
-
+
          When the multiselection mode is on, the selected items are retrieved with the elm_gengrid_selected_items_get() function. The function returns a list of all selected items.
          
+
          • 
+
        • Update items:
 
          When the content of an item changes, you can call the elm_gengrid_item_update() function to ask the gengrid to update this item. The gengrid re-realizes the item and calls the functions in the _Elm_Gengrid_Item_Class for it.
          
 
          If you want to change some parts of the items, you can also use the elm_gengrid_item_fields_update() function for the specific parts:
          
 
          • ELM_GENGRID_ITEM_FIELD_TEXT
            • 
 
          • ELM_GENGRID_ITEM_FIELD_CONTENT
            • 
 
          • ELM_GENGRID_ITEM_FIELD_STATE
          
-
-
+
          • 
+
        • Select or disable items:
 
          It is also possible to select or disable some items manually with the elm_gengrid_item_selected_set() and elm_object_item_disabled_set() functions.
          
+
          • 
+
        
 
 
        Using Gengrid Callbacks
        
 
 
        The gengrid component emits the following signals:
        
   
          
-   
        • activated: The user has double-clicked or pressed (enter | return | spacebar) on an item. The event_info parameter is the gengrid item that is activated.
          • 
-   
        • clicked,double: The user has double-clicked an item. The event_info parameter is the gengrid item that is double-clicked.
          • 
-   
        • clicked,right: The user has right-clicked an item. The event_info parameter is the gengrid item that is right-clicked.
          • 
+   
        • activated: The item is double-clicked or pressed (enter | return | spacebar). The event_info parameter is the gengrid item that is activated.
          • 
+   
        • clicked,double: The item is double-clicked. The event_info parameter is the gengrid item that is double-clicked.
          • 
+   
        • clicked,right: The item is right-clicked. The event_info parameter is the gengrid item that is right-clicked.
          • 
    
        • longpressed: The item is pressed for a certain amount of time. By default it is one second.
          • 
-   
        • selected: The user has selected an item. The event_info parameter is the gengrid item that is selected.
          • 
-   
        • unselected: The user has unselected an item. The event_info parameter is the gengrid item that is unselected.
          • 
+   
        • selected: The item is selected. The event_info parameter is the gengrid item that is selected.
          • 
+   
        • unselected: The item is unselected. The event_info parameter is the gengrid item that is unselected.
          • 
    
        • realized: The item is created as a real evas object. The event_info parameter in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
          • 
    
        • unrealized: The item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. The event_info parameter in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
          • 
    
        • changed: An item is added, removed, resized or moved and the gengrid is resized or has horizontal property changes.
          • 
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 528d52b..0e87a7c 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
@@ -27,7 +27,7 @@
 			
        • Defining the Genlist and Item Style
          • 
 			
        • Creating and Deleting Items
          • 
 			
        • Managing Items
          • 
-			
        • Selection
          • 
+			
        • Selecting Items
          • 
 			
        • Using Genlist Callbacks
          • 
 		
        
 			
        Related Info
        
@@ -45,7 +45,7 @@
 
 
        Genlist is a UI component that displays a scrollable list of items. It allows a lot of items while being fast and has a low memory footprint, as only the visible items are allocated in the memory.
        
 
-
        For more information, see Creating Mobile Genlists.
        
+
        For more information, see Creating Mobile Genlists and the Genlist API.
        
 
 
        Figure: Genlist component
         
 
        Genlist component Genlist component
         
@@ -55,7 +55,7 @@
 
 
        Adding a Genlist Component
        
 
-
        A genlist component is added with the elm_genlist_add() function:
        
+
        To add a genlist component, use the elm_genlist_add() function:
        
 
         Evas_Object *genlist, *parent;
 genlist = elm_genlist_add(parent);
@@ -81,14 +81,14 @@ genlist = elm_genlist_add(parent);
 	
      • solid/handler
        • 
 
      
 
-
      In tizen 2.4, the genlist items have a gradient opacity from the top to the bottom rather than an explicit divider. Each item is identified by its color made by blending its opacity and background color (or image).
      
+
      In Tizen 2.4, the genlist items have a gradient opacity from the top to the bottom rather than an explicit divider. Each item is identified by its color made by blending its opacity and background color (or image).
      
 
-
      The solid prefix in a genlist style name means that genlist items have a divider and background color. To have a genlist with a solid background color, set it as follows:
      
+
      The solid prefix in a genlist style name means that genlist items have a divider and background color. The following example sets a genlist with a solid background color.
      
 
       elm_object_style_set(genlist, "solid/default");
 
      
 
-
      The genlist item style determines the number of parts for text and content, and their arrangement within the item. For example, a default style item has one text part (elm.text), and 2 contents parts (elm.swallow.icon and elm.swallow.end).
      
+
      The genlist item style determines the number of parts for text and content, and their arrangement within the item. For example, a default style item has 1 text part (elm.text), and 2 content parts (elm.swallow.icon and elm.swallow.end).
      
 
 
      The following item styles are available:
      
   
        
@@ -100,7 +100,7 @@ elm_object_style_set(genlist, "solid/default");
 	
      • double_label
        • 
   
      
 
-
      The following item styles are supported from Tizen 2.4:
      
+
      The following item styles are supported since Tizen 2.4:
      
   
        
 	
      • type1
        • 
 	
      • type2
        • 
@@ -108,7 +108,7 @@ elm_object_style_set(genlist, "solid/default");
 	
      • group_index/expandable
      
   
   
-
      Here are some examples of the item styles.
      
+
      The following figures show examples of the item styles.
      
 
 
      Figure: Default item style
       
 
       Default item style 
       
@@ -203,7 +203,7 @@ _item_content_get(void *data, Evas_Object *obj, const char *part)
 } 
 
    16. del
-
      This function is called when the genlist item is deleted. It deletes any data which were allocated at the item creation.
      
+
      This function is called when the genlist item is deleted. It deletes any data that has been allocated at the item creation.
      
 
 
       static void
@@ -216,23 +216,28 @@ _item_del(void *data, Evas_Object *obj)
 
 
      Managing Items
      
 
-
      To add an item, several functions can be used. elm_genlist_item_append() 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. elm_genlist_item_prepend() is otherwise the same but adds to the beginning of the list or parent list. elm_genlist_item_insert_before() inserts an item before the indicated item and elm_genlist_item_insert_after() inserts an item after the indicated item.
      
+
      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 parent list. 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.
        
 
-
        The previous functions take a type parameter that can be one of the following.
        
+
        The functions take one of the following type parameters:
        
   
          
    
        • ELM_GENLIST_ITEM_NONE
          • 
-   
        • ELM_GENLIST_ITEM_TREE
          • 
-   
        • ELM_GENLIST_ITEM_GROUP
          • 
+   
        • ELM_GENLIST_ITEM_TREE
+   
          The item is displayed as being able to expand and have child items.
          
+   
          Figure: Genlist tree
          
+   
           Genlist tree 
          • 
+   
        • ELM_GENLIST_ITEM_GROUP
+   
          The item is a group index item that is displayed at the top until the next group appears.
          • 
   
        
 
-
        If ELM_GENLIST_ITEM_TREE is set, this item is displayed as being able to expand and have child items. If ELM_GENLIST_ITEM_GROUP is set, this item is a group index item that is displayed at the top until the next group appears.
        
-
-
        Figure: Genlist tree
         
-
         Genlist tree 
         
-
-
        The application clears the list with elm_genlist_clear(), which deletes all the items in the list. elm_object_item_del() deletes a specific item. elm_genlist_item_subitems_clear() clears all items that are children of the indicated parent item.
        
-
-
        To help inspect the list items, move to the item at the top of the list with elm_genlist_first_item_get(), which returns the item pointer. elm_genlist_last_item_get() moves to the item at the end of the list. elm_genlist_item_next_get() and elm_genlist_item_prev_get() 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.
        
+
        • 
+
      • 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.
        
+
        • 
+
      • 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.
        
 
   
      17. 
     
         
       
  
 
 
 
 
    
       
@@ -240,21 +245,23 @@ _item_del(void *data, Evas_Object *obj)
       
-      
+     
       
    
      Note 
     
       
     
      As a tree, the items are flattened on the list, so elm_genlist_item_parent_get() gives you the name of the parent item (even to skip them if needed).As a tree, the items are flattened on the list, so the elm_genlist_item_parent_get() function gives you the name of the parent item (even to skip them if needed). 
     
       
           
   
        
 
-
      elm_genlist_item_show() scrolls the genlist to the desired item.
      
-
      elm_object_item_data_get() returns the data pointer set by the item creation functions.
      
-
-
      If an item changes (text or content change), use the elm_genlist_item_update() for the genlist to update the item. Genlist re-realizes the item and calls the functions in the _Elm_Genlist_Item_Class for it.
      
+
      The elm_genlist_item_show() function scrolls the genlist to the desired item.
      
+
      The elm_object_item_data_get() function returns the data pointer set by the item creation functions.
      
+
+
    17. Update items:
+
      If an item changes (text or content change), use the elm_genlist_item_update() function for the genlist to update the item. Genlist re-realizes the item and calls the functions in the _Elm_Genlist_Item_Class class for it.
      
 
 
      You can also use the elm_genlist_item_fields_update() function to update only specific parts:
      
 
        
 
      • ELM_GENLIST_ITEM_FIELD_TEXT
        • 
 
      • ELM_GENLIST_ITEM_FIELD_CONTENT
      
-
+
      18. 
+
    18. Change the genlist and item size:
 
      The genlist and item size can be changed by the elm_genlist_mode_set() function:
      
 
        
 
      • ELM_LIST_COMPRESS
@@ -266,9 +273,11 @@ _item_del(void *data, Evas_Object *obj)
 
      • ELM_LIST_EXPAND
 
        Besides setting a minimum size on the transverse axis, like ELM_LIST_LIMIT, the list sets a minimum size on the longitudinal axis, trying to reverse space to all its children to be visible at a time.
      
 
-
      The elm_genlist_homogeneous_set() function makes all items have the same height, and increases the performance by reducing size calculation during genlist item creation.
      
+
      The elm_genlist_homogeneous_set() function makes all items the same height, and increases the performance by reducing size calculation during genlist item creation.
      
+
      19. 
+
 
-
      Selection
      
+
      Selecting 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 item, the elm_genlist_item_expanded_set() function is used to expand or contract the item.
      
 
@@ -294,7 +303,7 @@ 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 elm_genlist_multi_select_set() 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() returns a list of the currently selected items.
      
+
      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.
      
 
 
      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.)
      
 
@@ -305,14 +314,14 @@ select_cb(void *data, Evas_Object *obj, void *event_info)
 
 
      The genlist component emits the following signals:
      
    
         
-   
      • activated: The user has double-clicked or pressed (enter | return | spacebar) on an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
-   
      • clicked,double: The user has double-clicked an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
-   
      • selected: The user selects an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
-   
      • unselected: The user unselects an item. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.
        •  
-   
      • expanded: The item is to be expanded with elm_genlist_item_expanded_set(). This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
-   
      • contracted: The item is to be contracted with elm_genlist_item_expanded_set(). This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
-   
      • expand,request: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
-   
      • contract,request: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
+   
      • activated: The item is double-clicked or pressed (enter | return | spacebar). event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
+   
      • clicked,double: The item is double-clicked. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
+   
      • selected: The item is selected. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
+   
      • unselected: The item is unselected. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.
        •  
+   
      • expanded: The item is to be expanded with the elm_genlist_item_expanded_set() function. This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
+   
      • contracted: The item is to be contracted with the elm_genlist_item_expanded_set() function. This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
+   
      • expand,request: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls the elm_genlist_item_expanded_set() function to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
+   
      • contract,request: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls the elm_genlist_item_expanded_set() function to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
    
      • realized: The item is created as a real evas object. event_info in the callback function points at an object of the type Elm_Object_Item, that contains the activated item.
        •  
    
      • unrealized: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
    
      • drag,start,up: The item in the list is dragged (not scrolled) up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        •  
@@ -339,8 +348,8 @@ select_cb(void *data, Evas_Object *obj, void *event_info)
    
      • multi,pinch,in: The genlist is multi-touch pinched in. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
    
      • swipe: The genlist is swiped. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
    
      • moved: A genlist item is moved in the reorder mode. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
-   
      • moved,after: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use elm_genlist_item_prev_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
-   
      • moved,before: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use elm_genlist_item_next_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
+   
      • moved,after: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the elm_genlist_item_prev_get() function. This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
+   
      • moved,before: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use the elm_genlist_item_next_get() function. This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
    
      • language,changed The program's language is changed. event_info is NULL.
        • 
    
      • tree,effect,finished: A genlist tree effect is finished. event_info is NULL.
        • 
    
      • pressed: The genlist item is pressed by mouse down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
        • 
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 d389237..1916193 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,11 +23,11 @@
 	
        
 		
        Content
        
 		
 			
        Related Info
        
@@ -46,7 +46,7 @@
 
 
        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.
        
 
-
        For more information, see Creating Wearable Genlists.
        
+
        For more information, see Creating Wearable Genlists and the Genlist API.
        
   
 
        Figure: Genlist component
         
 
         Genlist component 
         
@@ -54,9 +54,9 @@
 
        Figure: Genlist hierarchy
         
 
         Genlist hierarchy 
         
 
-
        Genlist Item Style
        
+
        Defining the Genlist Item Style
        
 
-
        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 one text part (elm.text), two content parts (elm.swallow.icon and elm.swallow.end) and no state parts.
        
+
        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.
        
 
 
        The following item styles are available:
        
   
          
@@ -73,7 +73,7 @@
 	
        • multiline/2text
          • 
   
        
 
-
        Here are some examples of the item styles.
        
+
        The following figures show examples of the item styles.
        
 
 
        Figure: 1text item style
         
 
         1 text item style 
         
@@ -88,7 +88,7 @@
 
 
        Adding a Genlist Component
        
 
-
        A genlist component is added with the elm_genlist_add() function.
        
+
        To add a genlist component, use the elm_genlist_add() function:
        
 
         Evas_Object *genlist, *parent;
 genlist = elm_genlist_add(parent);
@@ -96,7 +96,7 @@ genlist = elm_genlist_add(parent);
 
 
        Creating and Deleting Items
        
 
-
        To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a Elm_Genlist_Item_Class structure that informs the genlist component which callbacks to call when an item is created or deleted.
        
+
        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();
 
@@ -109,9 +109,9 @@ itc->func.state_get = _item_state_get;
 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 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() 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 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.
        
   
          
    
        • 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.
          • 
@@ -120,7 +120,7 @@ itc->func.del = _item_del;
    
          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.
          
 
    
        • 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 argument, 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. 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.
          
 
    
        • del
    
          This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.
          • 
@@ -128,23 +128,29 @@ itc->func.del = _item_del;
 
 
          Managing Items
          
 
-
          To add an item, several functions can be used. elm_genlist_item_append() 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. elm_genlist_item_prepend() is otherwise the same but adds to the beginning of the list or children lists. elm_genlist_item_insert_before() inserts an item before the indicated item and elm_genlist_item_insert_after() inserts an item after the indicated item.
          
+
          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.
            
 
-
            The previous functions take a type parameter that can be one of the following.
            
+
            The functions take one of the following type parameters:
            
   
              
    
            • ELM_GENLIST_ITEM_NONE
              • 
-   
            • ELM_GENLIST_ITEM_TREE
              • 
-   
            • ELM_GENLIST_ITEM_GROUP
              • 
+   
            • ELM_GENLIST_ITEM_TREE
+   
              The item is displayed as being able to expand and have child items. In the wearable profile, the genlist tree item style is not supported yet, so the following example image is for the mobile profile.
              
+   
              Figure: Genlist tree
               
+   
               Genlist tree 
               
              • 
+   
            • ELM_GENLIST_ITEM_GROUP
+   
              The item is a group index item that is displayed at the top until the next group appears.
              • 
   
            
 
-
            If ELM_GENLIST_ITEM_TREE is set, this item is displayed as being able to expand and have child items. If ELM_GENLIST_ITEM_GROUP is set, this item is a group index item that is displayed at the top until the next group appears. (In wearable profile, genlist tree item style is not supported yet, so the sample image of mobile profile is displayed below.)
            
 
-
            Figure: Genlist tree
             
-
             Genlist tree 
             
-
-
            The application clears the list with elm_genlist_clear(), which deletes all the items in the list. elm_object_item_del() deletes a specific item. elm_genlist_item_subitems_clear() clears all items that are children of the indicated parent item.
            
-
-
            To help inspect the list items, move to the item at the top of the list with elm_genlist_first_item_get(), which returns the item pointer. elm_genlist_last_item_get() moves to the item at the end of the list. elm_genlist_item_next_get() and elm_genlist_item_prev_get() 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.
            
+
            • 
+
          • 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.
            
+
            • 
+
          • 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.
            
 
    
@@ -152,19 +158,22 @@ itc->func.del = _item_del;
       
-      
+     
             
    
            Note 
     
             
     
            As a tree, the items are flattened on the list, so elm_genlist_item_parent_get() gives you the name of the parent item (even to skip them if needed).As a tree, the items are flattened on the list, so the elm_genlist_item_parent_get() function gives you the name of the parent item (even to skip them if needed). 
     
             
                 
   
              
 
-
            elm_genlist_item_show() scrolls the scroller to show the desired item as visible. 
            
-
            elm_object_item_data_get() returns the data pointer set by the item creation functions.
            
-
-
            If an item changes (state, boolean, text or content change), use elm_genlist_item_update() for the genlist to update the item. Genlist re-realizes the item and calls the functions in the _Elm_Genlist_Item_Class for it.
            
+
            The elm_genlist_item_show() function scrolls the scroller to show the desired item as visible. 
            
+
            The elm_object_item_data_get() function returns the data pointer set by the item creation functions.
            
+
            • 
+
          • Update items:
+
            If an item changes (state, boolean, text or content change), use the elm_genlist_item_update() function for the genlist to update the item. Genlist re-realizes the item and calls the functions in the _Elm_Genlist_Item_Class class for it.
            
+
            • 
+
          
 
-
          Selection
          
+
          Selecting Items
          
 
-
          Items are manually selected or deselected with elm_genlist_item_selected_set() or disabled with elm_object_item_disabled_set(). 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.
          
+
          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.
          
 
    
@@ -177,25 +186,25 @@ 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 elm_genlist_multi_select_set() 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() returns a list of the current selected items.
          
+
          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.
          
 
-
          In the following figure, there is a genlist in multi-selection mode with two items selected (#2 and #3) and one item disabled (#0).
          
+
          In the following figure, the first item is disabled and third and fourth item are selected in the multi-selection mode. 
          
 
-
          Figure: Genlist component
           
-
           Genlist component 
          
+
          Figure: Genlist item selection highlight
           
+
           Genlist item selection highlight 
           
 
 
          Using Genlist Callbacks
          
 
 
          The genlist component emits the following signals:
          
-  
             
-   
          • activated: The user has double-clicked or pressed (enter | return | spacebar) on an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
            •  
-   
          • clicked,double: The user has double-clicked an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
            •  
-   
          • selected: The user selects an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
            •  
-   
          • unselected: The user unselects an item. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.
            •  
-   
          • expanded: The item is to be expanded with elm_genlist_item_expanded_set(). This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
            •  
-   
          • contracted: The item is to be contracted with elm_genlist_item_expanded_set(). This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
            •  
-   
          • expand,request: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
            •  
-   
          • contract,request: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
            •  
+   
               
+   
            • activated: The item is double-clicked or pressed (enter | return | spacebar). event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
+   
            • clicked,double: The item is double-clicked. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
+   
            • selected: The item is selected. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
+   
            • unselected: The item is unselected. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.
              •  
+   
            • expanded: The item is to be expanded with the elm_genlist_item_expanded_set() function. This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
+   
            • contracted: The item is to be contracted with the elm_genlist_item_expanded_set() function. This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
+   
            • expand,request: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls the elm_genlist_item_expanded_set() function to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
+   
            • contract,request: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls the elm_genlist_item_expanded_set() function to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
    
            • realized: The item is created as a real evas object. event_info in the callback function points at an object of the type Elm_Object_Item, that contains the activated item.
              •  
    
            • unrealized: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
    
            • drag,start,up: The item in the list is dragged (not scrolled) up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              •  
@@ -221,8 +230,8 @@ itc->func.del = _item_del;
    
            • multi,pinch,in: The genlist is multi-touch pinched in. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              • 
    
            • swipe: The genlist is swiped. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              • 
    
            • moved: A genlist item is moved in the reorder mode. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              • 
-   
            • moved,after: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use elm_genlist_item_prev_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              • 
-   
            • moved,before: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use elm_genlist_item_next_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              • 
+   
            • moved,after: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the elm_genlist_item_prev_get() function. This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              • 
+   
            • moved,before: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use the elm_genlist_item_next_get() function. This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
              • 
    
            • language,changed The program's language is changed. event_info is NULL.
              • 
    
            • tree,effect,finished: A genlist tree effect is finished. event_info is NULL.
              • 
   
            
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 06fd018..44c5a7f 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
@@ -41,7 +41,7 @@
 
            This feature is supported in mobile applications only.
            
 
 
-
             The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see OpenGL ES.
            
+
            The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see OpenGL ES and the OpenGL API.
            
 
       
            Figure: GLView gears example
             
   
            GLView gears example
             
@@ -51,21 +51,25 @@
 
 
            Adding a GLView Component
            
 
-
            Create a GLView component with the elm_glview_add() function.
            
+
            Create a GLView component with the elm_glview_add() function:
            
 
             Evas_Object *glview, *parent;
 
 glview = elm_glview_add(parent);
 
            
 
-
            In this example, the size of the GLView is set to 200x200 pixels.
            
+
            Set the size of the GLView to 200x200 pixels:
            
 
             elm_glview_size_set(glview, 200, 200);
 
            
 
 
            Using the GLView API
            
 
-
            You can configure the GLView rendering mode by activating the following rendering modes:
            
+
            To use the GLView:
            
+
+
              
+
            1. 
+
              Configure the GLView rendering mode by activating the following rendering modes:
              
 
 
                
 
              • ELM_GLVIEW_ALPHA: Alpha channel rendering mode
                • 
@@ -79,21 +83,24 @@ elm_glview_size_set(glview, 200, 200);
 
                 elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
 
                
-
-
                The following example shows how to decide what to do with the GL surface when the GLView component is resized.
                
+
+
              • 
+
                Set the resize policy. The following example shows how to decide 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 following example shows how to set the GLView rendering policy.
                
+
                • 
+
              • 
+
                Set the GLView rendering policy:
                
 
                 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.
                
-
+
                • 
+
              • 
 
                Register the callbacks:
                
 
 
                elm_glview_init_func_set(glview, _init_gl_cb);
@@ -103,22 +110,24 @@ 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_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.
                  • 
 
                
+
                • 
+
            
 
 
            Using GLView Callbacks
            
 
 
            The GLView component emits the following signals:
            
 
 
              
-
            • focused: The Glview component is focused. The event_info parameter points at an object of the type Elm_Focus_Info.
              • 
+
            • focused: The GLView component is focused. The event_info parameter points at an object of the type Elm_Focus_Info.
              • 
 
            • unfocused: The GLView object is unfocused.
              • 
 
            
 
-
            To register a callback:
            
+
            To register a callback for the focused signal:
            
 
             {
    evas_object_smart_callback_add(glview, "focused", focused_cb, data);
@@ -126,7 +135,8 @@ elm_glview_render_func_set(glview, _draw_gl_cb);
 
 // Callback function for the "focused" signal
 // This callback is called when the GLView is focused
-void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+void 
+focused_cb(void *data, Evas_Object *obj, void  *event_info)
 {
    Elm_Focus_Info *fi = 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 e32c5bb..5714868 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
@@ -42,7 +42,7 @@
 
            This feature is supported in wearable applications only.
            
 
 
-
             The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see OpenGL ES.
            
+
            The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see OpenGL ES and the OpenGL API.
            
 
 
       
            Figure: GLView example
             
@@ -53,21 +53,26 @@
 
 
            Adding a GLView Component
            
 
-
            Create a GLView component with the elm_glview_add() function.
            
+
            Create a GLView component with the elm_glview_add() function:
            
 
             Evas_Object *glview, *parent;
 
 glview = elm_glview_add(parent);
 
            
 
-
            In this example, the size of the GLView is set to 200x200 pixels.
            
+
            Set the size of the GLView to 200x200 pixels:
            
 
             elm_glview_size_set(glview, 200, 200);
 
            
 
 
            Using the GLView API
            
 
-
            You can configure the GLView rendering mode by activating the following rendering modes:
            
+
            To use the GLView:
            
+
+
              
+
            1. 
+
              Configure the GLView rendering mode by activating the following rendering modes:
              
+
 
                
 
              • ELM_GLVIEW_ALPHA: Alpha channel rendering mode
                • 
 
              • ELM_GLVIEW_DEPTH: Depth buffer rendering mode
                • 
@@ -80,22 +85,26 @@ elm_glview_size_set(glview, 200, 200);
 
                 elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
 
                
-
-
                The following example shows how to decide what to do with the GL surface when the GLView component is resized.
                
+
+
              • 
+
                Set the resize policy. The following example shows how to decide 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 following example shows how to set the GLView rendering policy.
                
+
                • 
+
              • 
+
                Set the GLView rendering policy:
                
 
                 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.
                
-
+
                • 
+
              • 
 
                Register the callbacks:
                
+
 
                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);
@@ -103,21 +112,24 @@ 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_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.
                  • 
 
                
+
                • 
+
            
 
 
            Using GLView Callbacks
            
 
 
            The GLView component emits the following signals:
            
+
 
              
-
            • focused: The GlView component is focused. The event_info parameter points at an object of the type Elm_Focus_Info.
              • 
+
            • focused: The GLView component is focused. The event_info parameter points at an object of the type Elm_Focus_Info.
              • 
 
            • unfocused: The GLView object is unfocused.
              • 
 
            
 
-
            To register a callback:
            
+
            To register a callback for the focused signal:
            
 
             {
    evas_object_smart_callback_add(glview, "focused", focused_cb, data);
@@ -125,7 +137,8 @@ elm_glview_render_func_set(glview, _draw_gl_cb);
 
 // Callback function for the "focused" signal
 // This callback is called when the GLView is focused
-void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+void 
+focused_cb(void *data, Evas_Object *obj, void  *event_info)
 {
    Elm_Focus_Info *fi = 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 f4c9e6b..8ed4c36 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
@@ -42,8 +42,10 @@
 
            This feature is supported in mobile applications only.
            
 
  
-
            A hoversel component is a button that pops up a list of items (automatically choosing the direction to display).
            
-
            This UI component inherits from the button component. All button functions can be used on the hoversel component.
            
+
            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.
            
+
+
            For more information, see the Hoversel API.
            
 
 
            Figure: Hoversel component
             
 
            Hoversel component
            
@@ -54,7 +56,7 @@
 
 
            Adding a Hoversel Component
            
 
-
            You can create a hoversel component with 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. When activated, the component automatically chooses the direction in which to display itself in its parent object's view.
            
 
 
             Evas_Object *hoversel, *parent;
diff --git a/org.tizen.ui.practices/html/native/efl/component_icon_mn.htm b/org.tizen.ui.practices/html/native/efl/component_icon_mn.htm
index acce711..1cb1b7b 100644
--- a/org.tizen.ui.practices/html/native/efl/component_icon_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_icon_mn.htm
@@ -41,13 +41,15 @@
 
            This feature is supported in mobile applications only.
            
 
 
            An icon component is used to display standard icon images, such as "delete", "home", and "apps". The icon component inherits from the image component, and it is used to display images in an icon context.
            
-
            It is better to use an icon instead of an image, if:
            
+
            In the following cases it is better to use an icon instead of an image:
            
 
              
 
            • You need a thumbnail version of an original image.
              • 
 
            • You need freedesktop.org-provided icon images.
              • 
 
            • You need theme-provided icon images (Edje groups).
              • 
 
            
 
+
            For more information, see the Icon API.
            
+
 
            Figure: Icon component
             
 
             Icon component 
             
  
@@ -56,7 +58,7 @@
 
 
            Adding an Icon Component
            
 
-
            You can create an icon and set it as a freedesktop.org Home standard icon.
            
+
            To create an icon and set it as a freedesktop.org Home standard icon:
            
 
 
             Evas_Object *icon, *parent;
@@ -66,7 +68,10 @@ elm_icon_standard_set(icon, "Home");
 
 
            Changing Image File
            
 
-
            You can change the image by using an image in the filesystem (for example, /tmp/Home.png).
            
+
            To change the image file:
            
+
              
+
            • 
+
              Change the image by using an image in the filesystem (for example, /tmp/Home.png):
              
 
               elm_image_file_set(icon, "/tmp/Home.png", NULL);
 
              
@@ -75,26 +80,27 @@ elm_image_file_set(icon, "/tmp/Home.png", NULL);
 
               elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
 
              
-
+
              • 
+
            • 
 
              A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.
              
-
 
               elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
 
              
 
 
              This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.
              
+
              • 
+
            
 
 
            Using Icon Callbacks
            
 
 
            The icon component emits the following signals:
            
   
              
-   
            • thumb,done: elm_icon_thumb_set() is completed with success.
              • 
-   
            • thumb,error: elm_icon_thumb_set() fails.
              • 
+   
            • thumb,done: The elm_icon_thumb_set() function is completed with success.
              • 
+   
            • thumb,error: The elm_icon_thumb_set() function fails.
              • 
   
            
 
 
            In both cases, event_info is NULL.
            
 
-
 
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 c670b68..f5ef152 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
@@ -43,13 +43,14 @@
 
 
            The icon component inherits from the image component. It is used to display images in an icon context.
            
 
+
            For more information, see the Icon API.
            Figure: Icon hierarchy
             Icon hierarchy 
            Adding an Icon Component
            
 
-
            You can create an icon and set it as a freedesktop.org Home standard icon.
            
+
            To create an icon and set it as a freedesktop.org Home standard icon:
             Evas_Object *icon, *parent;
@@ -59,7 +60,10 @@ elm_icon_standard_set(icon, "Home");
 
 
            Changing Image File
            
 
-
            You can change the image by using an image in the filesystem (for example, /tmp/Home.png).
            
+
            To change the image file:
            
+
              
+
            • 
+
              Change the image by using an image in the filesystem (for example, /tmp/Home.png):
              
 
               elm_image_file_set(icon, "/tmp/Home.png", NULL);
 
              
@@ -68,21 +72,23 @@ elm_image_file_set(icon, "/tmp/Home.png", NULL);
 
               elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
 
              
-
+
              • 
+
            • 
 
              A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.
              
-
 
               elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
 
              
 
 
              This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.
              
+
              • 
+
            
 
 
            Using Icon Callbacks
            
 
 
            The icon component emits the following signals:
            
   
              
-   
            • thumb,done: elm_icon_thumb_set() is completed with success.
              • 
-   
            • thumb,error: elm_icon_thumb_set() fails.
              • 
+   
            • thumb,done: The elm_icon_thumb_set() function is completed with success.
              • 
+   
            • thumb,error: The elm_icon_thumb_set() function fails.
              • 
   
            
 
 
            In both cases, event_info is NULL.
            
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 d495ddc..4a13787 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
@@ -42,6 +42,8 @@
 
 
            The image component can load and display an image from a disk file or a memory region.
            
 
+
            For more information, see the Image API.
            
+
 
            Figure: Image component
             
 
             Image component 
               
 
@@ -50,7 +52,7 @@
 
 
            Adding an Image Component
            
 
-
            This object is created with elm_image_add().
            
+
            To create an image component, use the elm_image_add() function:
            
 
 
             Evas_Object *image, *parent;
@@ -59,23 +61,28 @@ image = elm_image_add(parent);
 
 
            Configuring the Image Component
            
 
-
            Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.
            
+
            To configure the image component:
            
+
              
+
            • Disable elementary scaling so that the image does not scale but resizes on both directions:
              
 
               elm_image_no_scale_set(image, EINA_TRUE);
 elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
 
              
-
-
              When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.
              
+
              • 
+
            • 
+
              Use the smooth scaling algorithm to provide a better quality image. It is slower than the default algorithm.
              
 
               elm_image_smooth_set(image, EINA_TRUE);
 
              
-
-
              Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.
              
+
              • 
+
            • 
+
              Preload images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled.
              
 
               elm_image_preload_disabled_set(image, EINA_TRUE);
 
              
-
-
              The image can be rotated or flipped. Here the image is rotated 180 degrees.
              
+
              • 
+
            • 
+
              Rotate or flip the image. In the following example, the image is rotated 180 degrees.
              
 
               elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
 
              
@@ -91,8 +98,9 @@ elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
    
            • ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line
              • 
    
            • ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line
              • 
   
            
-  
-
            If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object's area.
            
+
+
          •  
+
            To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:
            
 
             // Tell the image to keep original aspect ratio 
 elm_image_aspect_fixed_set(image, EINA_TRUE);
@@ -100,9 +108,10 @@ elm_image_aspect_fixed_set(image, EINA_TRUE);
 elm_image_fill_outside_set(image, EINA_TRUE);
 
            
 
-
            In this configuration, part of the image can go outside the object. If elm_image_fill_outside_set is set to EINA_FALSE, the image stays inside the limits of the parent object.
            
-
-
            You can execute an animation when the flag is set to EINA_TRUE on both the elm_image_animated_set() and elm_image_animated_play_set() functions.
            
+
            In this configuration, part of the image can go outside the object. If the elm_image_fill_outside_set() function is set to EINA_FALSE, the image stays inside the limits of the parent object.
            
+
            • 
+
          • 
+
            Execute an animation with the elm_image_animated_set() and elm_image_animated_play_set() functions. The flag must be set to EINA_TRUE on both functions.
            
 
             // Check whether an image object supports animation
 elm_image_animated_available_get(image);
@@ -123,13 +132,14 @@ if (elm_image_animated_available_get(image))
    elm_image_animated_play_set(image, EINA_TRUE);
 }
 
            
-
+
            • 
+
 
 
            Using Image Callbacks
            
 
 
            The image component emits the following signals:
            
   
              
-   
            • drop: The user drops an image typed object onto the object in question - the event info argument is the path to that image file
              • 
+   
            • drop: The user drops an image typed object onto the object in question. The event info parameter is the path to that image file.
              • 
    
            • clicked: The user clicks the image. event_info is NULL.
              • 
   
            
 
@@ -141,7 +151,8 @@ if (elm_image_animated_available_get(image))
 
 // Callback function for the "clicked" signal
 // This callback is called when the image is clicked
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_image_wn.htm b/org.tizen.ui.practices/html/native/efl/component_image_wn.htm
index 1e74051..6360fa2 100644
--- a/org.tizen.ui.practices/html/native/efl/component_image_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_image_wn.htm
@@ -43,6 +43,7 @@
 
 
            The image component can load and display an image from a disk file or a memory region.
            
 
+
            For more information, see the Image API.
            
 
            Figure: Image component
             
 
             Image component 
              
 
@@ -51,7 +52,7 @@
 
 
            Adding an Image Component
            
 
-
            This object is created with elm_image_add().
            
+
            To create an image component, use the elm_image_add() function:
            
 
 
             Evas_Object *image, *parent;
@@ -60,23 +61,28 @@ image = elm_image_add(parent);
 
 
            Configuring the Image Component
            
 
-
            Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.
            
+
            To configure the image component:
            
+
              
+
            • Disable elementary scaling so that the image does not scale but resizes on both directions:
              
 
               elm_image_no_scale_set(image, EINA_TRUE);
 elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
 
              
-
-
              When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.
              
+
              • 
+
            • 
+
              Use the smooth scaling algorithm to provide a better quality image. It is slower than the default algorithm.
              
 
               elm_image_smooth_set(image, EINA_TRUE);
 
              
-
-
              Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.
              
+
              • 
+
            • 
+
              Preload images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled.
              
 
               elm_image_preload_disabled_set(image, EINA_TRUE);
 
              
-
-
              The image can be rotated or flipped. Here the image is rotated 180 degrees.
              
+
              • 
+
            • 
+
              Rotate or flip the image. In the following example, the image is rotated 180 degrees.
              
 
               elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
 
              
@@ -92,8 +98,9 @@ elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
    
            • ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line
              • 
    
            • ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line
              • 
   
            
-  
-
            If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object's area.
            
+
+
          •  
+
            To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:
            
 
             // Tell the image to keep original aspect ratio 
 elm_image_aspect_fixed_set(image, EINA_TRUE);
@@ -101,13 +108,15 @@ elm_image_aspect_fixed_set(image, EINA_TRUE);
 elm_image_fill_outside_set(image, EINA_TRUE);
 
            
 
-
            In this configuration, part of the image can go outside the object. If elm_image_fill_outside_set is set to EINA_FALSE, the image stays inside the limits of the parent object.
            
+
            In this configuration, part of the image can go outside the object. If the elm_image_fill_outside_set() function is set to EINA_FALSE, the image stays inside the limits of the parent object.
            
+
            • 
+
 
 
            Using Image Callbacks
            
 
 
            The image component emits the following signals:
            
   
              
-   
            • drop: The user drops an image typed object onto the object in question - the event info argument is the path to that image file
              • 
+   
            • drop: The user drops an image typed object onto the object in question. The event info parameter is the path to that image file.
              • 
    
            • clicked: The user clicks the image. event_info is NULL.
              • 
   
            
 
@@ -119,7 +128,8 @@ elm_image_fill_outside_set(image, EINA_TRUE);
 
 // Callback function for the "clicked" signal
 // This callback is called when the image is clicked
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
 }
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 58d77d4..0f3d675 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
@@ -46,8 +46,10 @@
 
            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:
            
 
-
            • "fastscroll" is the default style. It is a one-finger-wide area on the right side of the index component's container. Generally, the default style is used together with lists, generic lists, or generic grids.
              • 
-
            • "pagecontrol" is a one-finger-high area on the bottom side of the index component container. Generally, the pagecontrol style is used together with a layout, and images which are located in a scrollable object.
            
+
            • "fastscroll" is the default style. It is a one-finger-wide area on the right side of the index component's container. Generally, the default style is used together with lists, generic lists, or generic grids.
              • 
+
            • "pagecontrol" is a one-finger-high area on the bottom side of the index component container. Generally, the pagecontrol style is used together with a layout, and images which are located in a scrollable object.
            
+
+
            For more information, see the Index API.
            
 
 
            Figure: Index component (fastscroll on right and pagecontrol on left)
             
 
             Index (fastscroll) component Index (pagecontrol) component 
             
@@ -55,9 +57,11 @@
 
            Figure: Index hierarchy
             
 
             Index hierarchy 
             
 
+
+
 
            Adding an Index Component
            
 
-
            Call the elm_index_add() function to create a new index component.
            
+
            To create a new index component, use the elm_index_add() function:
            
 
             Evas_Object *index, *parent;
 index = elm_index_add(parent);
@@ -67,7 +71,7 @@ index = elm_index_add(parent);
 
 
            The index component style can be set with the elm_object_style_set() function to default (fastscroll) or pagecontrol.
            
 
-
            The following example sets the pagecontrol style:
            
+
            To set the pagecontrol style:
            
 
             elm_object_style_set(index, "pagecontrol");
 
            
@@ -79,34 +83,47 @@ char *style = elm_object_style_get(index);
 
 
            Configuring the Index
            
 
-
            The orientation is set with the elm_index_horizontal_set() function. For the default style, both orientations are supported, but for the pagecontrol style, only horizontal mode is available.
            
+
            To configure the index component:
            
+
              
+
            • 
+
              Set the index orientation with the elm_index_horizontal_set() function. For the default style, both orientations are supported, but for the pagecontrol style, only horizontal mode is available.
              
 
               elm_index_horizontal_set(index, EINA_TRUE);
 
              
-
              The autohide feature is enabled by default. Autohide can be disabled with the elm_index_autohide_disabled_set() function:
              
+
              • 
+
            • Disable auto hiding.
+
              The auto hide feature is enabled by default. Auto hide can be disabled with the elm_index_autohide_disabled_set() function.
              
 
               elm_index_autohide_disabled_set(index, EINA_TRUE);
 
              
+
              • 
+
            
 
 
            Adding Items
            
 
-
            The following example shows how to add the list item object at the letter A, calling the smart callback it_select_cb() when this item is selected.
            
+
            To add items:
            
+
              
+
            1. 
+
              Add the 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 following example shows how to define the smart callback.
              
+
              2. 
+
            2. 
+
              Define the smart callback:
              
 
              -// Callback function called when the list_item1 object
-// is selected
-void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+// Callback function called when the list_item1 object is selected
+void 
+it_select_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
 }
 
              
+
              3. 
+
            
 
-
            In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with elm_index_item_prepend().
            
+
            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
            
 
@@ -116,8 +133,7 @@ void it_select_cb(void *data, Evas_Object *obj, void *event_info)
 
 
             static int
-_index_icmp(const void *data1,
-      const void *data2)
+_index_icmp(const void *data1, const void *data2)
 {
    int result;
 
@@ -127,7 +143,7 @@ _index_icmp(const void *data1,
 }
 
            
 
-
            This example shows how to add a new item at the B index using the compare function to sort the indexes.
            
+
            The following example shows how 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);
@@ -139,12 +155,13 @@ elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp
   
              
    
            • changed: The selected index item changes. event_info is the selected item's data pointer.
              • 
    
            • delay,changed: The selected index item changes, but after a small idling period. event_info is the selected item's data pointer.
              • 
-   
            • selected: The user releases a mouse button and selects an item. event_info is the selected item's data pointer.
              • 
+   
            • selected: The mouse button is released and an item is selected. event_info is the selected item's data pointer.
              • 
    
            • level,up: The user moves a finger from the first level to the second level.
              • 
    
            • level,down: The user moves a finger from the second level to the first level.
              • 
   
            
 
-
            When the user selects an item in the index, the selected signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.
            
+
            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):
            
 
             static void
 _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
@@ -155,7 +172,7 @@ _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
 }
 
            
 
-
            After that, the callback to the selected signal is registered.
            
+
            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 0ac1f02..3397e7f 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
@@ -43,6 +43,7 @@
 
 
            An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component's container. Generally, an index is used together with lists, generic lists, or generic grids.
            
 
+
            For more information, see the Index API.
            
  
 
            Figure: Index component
             
 
             Index component 
             
@@ -52,7 +53,7 @@
 
 
            Adding an Index Component
            
 
-
            Call the elm_index_add() function to create a new index component.
            
+
            To create a new index component, use the elm_index_add() function:
            
 
             Evas_Object *index, *parent;
 index = elm_index_add(parent);
@@ -60,31 +61,37 @@ index = elm_index_add(parent);
 
 
            Adding Items
            
 
-
            The following example shows how to add the listitem object at the letter A, calling the smart callback it_select_cb() when this item is selected.
            
+
            To add items:
            
+
              
+
            1. 
+
              Add the 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 following example shows how to add item objects, calling the smart callback it_select_cb() when the item is selected.
              
+
              2. 
+
            2. 
+
              Add item objects, calling the it_select_cb() smart callback when the item is selected:
              
 
               Elm_Object_Item *it[5];
 for (i = 0; i < 5; ++i)
 {
    it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *) i);
 }
              
-
-
              The following example shows how to define the smart callback.
              
+
              3. 
+
            3. 
+
              Define the smart callback:
              
 
              -// Callback function called when the list_item1 object
-// is selected
-void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+// Callback function called when the list_item1 object is selected
+void 
+it_select_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
 }
 
              
-
-
              In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with elm_index_item_prepend().
              
+
              4. 
+
            
+
            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
            
@@ -93,12 +100,14 @@ void it_select_cb(void *data, Evas_Object *obj, void *event_info)
   
              
    
            • changed: The selected index item changes. event_info is the selected item's data pointer.
              • 
    
            • delay,changed: The selected index item changes, but after a small idling period. event_info is the selected item's data pointer.
              • 
-   
            • selected: The user releases a mouse button and selects an item. event_info is the selected item's data pointer.
              • 
+   
            • selected: The mouse button is released and an item is selected. event_info is the selected item's data pointer.
              • 
    
            • level,up: The user moves a finger from the first level to the second level.
              • 
    
            • level,down: The user moves a finger from the second level to the first level.
              • 
   
            
 
-
            When the user selects an item in the index, the selected signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.
            
+
            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):
            
 
             static void
 _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
@@ -109,7 +118,7 @@ _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
 }
 
            
 
-
            After that, the callback to the selected signal is registered.
            
+
            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 295beea..52d3437 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
@@ -41,8 +41,9 @@
 
 
            This feature is supported in mobile applications only.
            
 
-
            The label component displays text with simple html-like markup.
            
+
            The label component displays text with a simple html-like markup.
            
 
+
            For more information, see the Label API.
            
 
 
            Figure: Label component
             
 
             Label component 
             
@@ -52,7 +53,7 @@
 
 
            Adding a Label Component
            
 
-
            To add a label and set the text in it, use the following functions.
            
+
            To add a label and set the text in it:
            
 
 
             Evas_Object *label = elm_label_add(win);
@@ -62,7 +63,7 @@ elm_object_text_set(label, "Some long text for our label, that is not so lo
 
 
            Using the Label Styles
            
 
-
            Label displays the text with several predefined styles.
            
+
            Label displays the text with the following predefined styles:
            
   
               
    
            • default: No animation
              •  
    
            • marker: The text is centered and bolded.
              •  
@@ -71,7 +72,7 @@ elm_object_text_set(label, "Some long text for our label, that is not so lo
    
            • 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.
              •    
   
            
 
-
            Here the style is set to slide_long.
            
+
            In the following example, the style is set to slide_long.
            
 
 
             elm_object_style_set(label, "slide_long");
@@ -79,20 +80,26 @@ elm_object_style_set(label, "slide_long");
 
 
            Configuring the Label
            
 
-
            The duration of the animation and the slide mode can be set with the following functions.
            
+
            To configure the label:
            
+
              
+
            1. 
+
              Set the duration of the animation and the slide mode:
              
 
               elm_label_slide_duration_set(label, 3);
 elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
 
              
-
-
              Use the following function to modify the style.
              
+
              2. 
+
            2. 
+
              Modify the style:
              
 
               elm_object_style_set(label, "slide_bounce");
 
              
+
              3. 
+
            
 
 
            Using the Label Callbacks
            
 
-
            This UI component emits the following signals:
            
+
            The label component emits the following signals:
            
   
              
    
            • language,changed: The program's language changes.
              • 
    
            • slide,end: The slide reaches the end.
              • 
@@ -110,7 +117,8 @@ elm_object_style_set(label, "slide_bounce");
 
 // Callback function for the "slide,end" signal
 // This callback is called when the label slide reaches the end
-void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+slide_end_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
 }
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 e41947a..0dbe0d7 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
@@ -42,7 +42,9 @@
 
 
              This feature is supported in wearable applications only.
              
 
-
              The label component displays text with simple html-like markup.
              
+
              The label component displays text with a simple html-like markup.
              
+
+
              For more information, see the Label API.
              
 
 
              Figure: Label component
               
 
               Label component 
               
@@ -52,7 +54,7 @@
 
 
              Adding a Label Component
              
 
-
              To add a label and set the text in it, use the following functions.
              
+
              To add a label and set the text in it:
              
 
 
               Evas_Object *label = elm_label_add(win);
@@ -62,7 +64,7 @@ elm_object_text_set(label, "Some long text for our label, that is not so lo
 
 
              Using the Label Styles
              
 
-
              Label displays the text with several predefined styles.
              
+
              Label displays the text with the following predefined styles:
              
   
                 
    
              • default: No animation
                •  
    
              • marker: The text is centered and bolded.
                •  
@@ -72,7 +74,7 @@ elm_object_text_set(label, "Some long text for our label, that is not so lo
    
              • 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.
                •    
   
              
 
-
              Here the style is set to slide_roll.
              
+
              In the following example, the style is set to slide_roll.
              
 
 
               elm_object_style_set(label, "slide_roll");
@@ -80,20 +82,26 @@ elm_object_style_set(label, "slide_roll");
 
 
              Configuring the Label
              
 
-
              The duration of the animation and the slide mode can be set with the following functions.
              
+
              To configure the label:
              
+
                
+
              1. 
+
                Set the duration of the animation and the slide mode:
                
 
                 elm_label_slide_duration_set(label, 3);
 elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
 
                
-
-
                Use the following function to modify the style.
                
+
                2. 
+
              2. 
+
                Modify the style:
                
 
                 elm_object_style_set(label, "slide_bounce");
 
                
+
                3. 
+
              
 
 
              Using the Label Callbacks
              
 
-
              This UI component emits the following signals:
              
+
              The label component emits the following signals:
              
   
                
    
              • language,changed: The program's language changes.
                • 
    
              • slide,end: The slide reaches the end.
                • 
@@ -111,7 +119,8 @@ elm_object_style_set(label, "slide_bounce");
 
 // Callback function for the "slide,end" signal
 // This callback is called when the label slide reaches the end
-void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+slide_end_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
 }
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 fae75d3..faddc84 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
@@ -28,7 +28,7 @@
 			
              • Adding Items to the List
                • 
 			
              • Changing the Text or Icon of an Item
                • 
 			
              • Retrieving Selected Items
                • 
-			
              • List Item Operations
                • 
+			
              • Using List Item Operations
                • 
 			
              • Using List Callbacks
                • 
 			
 		
              
@@ -46,10 +46,11 @@
 
              This feature is supported in mobile applications only.
              
 
   
- 
              This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. 
              
+ 
              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 text and two contents (start and end). These are set with the elm_object_item_*() functions. 
              
+ 
              The list items can contain a piece of text and two contents (start and end). These are set with the elm_object_item_*() functions. 
              
 
+ 
              For more information, see the List API.
              
  
  
              Figure: List component
               
 
               List component 
               
@@ -59,6 +60,7 @@
  
 
              Adding a List Component
              
 
+
              To add a list component, use the elm_list_add() function:
              
 
               Evas_Object *list, *parent;
 
@@ -68,8 +70,10 @@ list = elm_list_add(parent);
 
 
              Using the List
              
 
-
              This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:
              
-
+
              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;
 
@@ -78,7 +82,8 @@ 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.
                
 
 
                @@ -87,17 +92,20 @@ Evas_Object *list;
 // Activate multi selection 
 elm_list_multi_select_set(list, EINA_TRUE);
 
                
+
                • 
+
              
 
 
              Adding Items to the List
              
 
- 
              Items are added with elm_list_item_append() or elm_list_item_prepend(). Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.
              
+ 
              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.
              
 
 
               Evas_Object *list;
 int i;
 
 // This function is called when the list item is selected 
-static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+_selected_item_cb(void *data, Evas_Object *obj, void *event_info)
 {
    Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
    Eina_Bool selected = elm_list_item_selected_get(list_it);
@@ -116,12 +124,11 @@ for (i = 0; i < 10; i++)
    // Add item to the list 
    elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
 }
-
 
              
  
 
              Changing the Text or Icon of an Item
              
 
-
              If you want to change the state of an item, you can do it by using all the functions relative to Elm_Object_Item. Each item of the list contains two instances of an evas_object. Give those as the third and the fourth arguments when you append or prepend the item in the list. The evas_object instances are changed with elm_object_item_part_content_set. The first object is referenced as the start object in the theme, whereas the second one is referenced as the end object. Give these names when you use the elm_object_item_part_content_set. The label of the item is changed by using elm_object_item_text_set.
              
+
              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.
              
 
 
               Evas_Object *list;
@@ -146,7 +153,7 @@ elm_object_item_text_set(it, "I've been selected !");
   
 
              Retrieving Selected Items
              
 
- 
              The list of the currently selected items is retrieved with elm_list_selected_items_get(). If the multiselect mode is false, you can retrieve the only selected item with elm_list_selected_item_get(). For example, this is how to unselect all previously 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.
              
 
 
               Evas_Object *list; Eina_List *l;
@@ -159,15 +166,15 @@ EINA_LIST_FOREACH(selected_items, l, it)
    elm_list_item_selected_set(it, EINA_FALSE);
 
              
 
-
              List Item Operations
              
+
              Using List Item Operations
              
 
- 
              To find out if an item is selected, call elm_list_item_selected_get. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.
              
+
              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.
              
 
- 
              Elementary list provides two functions for sliding a list to a specific item. elm_list_item_show shows the item passed as an argument, whereas elm_list_item_bring_in shows the item, but only after animating the slide.
              
+
              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 function elm_list_item_prev, or to the one immediately following a specific item with the function elm_list_item_next.
              
+
              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.
              
 
- 
              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. 
              
+
              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. 
              
 
 
               Evas_Object *list;
@@ -181,22 +188,22 @@ elm_list_item_bring_in(next);
 
 
              Using List Callbacks
              
 
- 
              The list emits the following signals: 
               
+ 
              The list component emits the following signals: 
               
   
                 
-   
              • activated: The user double-clicks or presses (enter | return | spacebar) on an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • clicked,double: The user double-clicks an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • selected: The user selects an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • unselected: The user unselects an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • longpressed: The user long-presses an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • activated: The item is double-clicked or pressed (enter | return | spacebar). The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • clicked,double: The item is double-clicked. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • selected: The item is selected. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • unselected: The item is unselected. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • longpressed: The item is long-pressed. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
    
              • edge,top: The list is scrolled to the top edge.
                •  
    
              • edge,bottom: The list is scrolled to the bottom edge.
                •  
    
              • edge,left: The list is scrolled to the left edge.
                •  
    
              • edge,right: The list is scrolled to the right edge.
                •  
-   
              • highlighted: The user highlights an item on the list. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • unhighlighted: The user unhighlights an item in the list. The event_info parameter of the callback function contains a pointer to the item activated.
                •   
+   
              • highlighted: An item on the list is highlighted. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • unhighlighted: An item in the list is unhighlighted. The event_info parameter of the callback function contains a pointer to the item activated.
                •   
   
              
 
-
              You can register to the clicked,double signal with the following code. Note that the currently double-clicked item can be retrieved using the event_info pointer. This code registers to the double,clicked signal and unselects the item that has been double-clicked.
              
+
              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.
              
 
 
               {
@@ -207,7 +214,8 @@ elm_list_item_bring_in(next);
 
 // Callback function for the "clicked" signal
 // This callback is called when the button is clicked by the user
-void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+void 
+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);
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 345f52d..6f61125 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
@@ -45,10 +45,12 @@
 
 
              This feature is supported in wearable applications only.
              
 
- 
              This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. 
              
+  
+ 
              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 text and two contents (start and end). These are set with the elm_object_item_*() functions. 
              
+ 
              The list items can contain a piece of text and two contents (start and end). These are set with the elm_object_item_*() functions. 
              
 
+ 
              For more information, see the List API.
              
  
  
              Figure: List component
               
 
               List component 
               
@@ -58,6 +60,7 @@
  
 
              Adding a List Component
              
 
+
              To add a list component, use the elm_list_add() function:
              
 
               Evas_Object *list, *parent;
 
@@ -67,8 +70,10 @@ list = elm_list_add(parent);
 
 
              Using the List
              
 
-
              This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:
              
-
+
              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;
 
@@ -77,7 +82,8 @@ elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO)
 // Enable bounce effect when the list reaches the upper and lower limits 
 elm_scroller_bounce_set(list, EINA_FALSE, EINA_TRUE);
 
                
-
+
                • 
+
              • 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.
                
 
 
                @@ -86,17 +92,20 @@ Evas_Object *list;
 // Activate multi selection 
 elm_list_multi_select_set(list, EINA_FALSE);
 
                
+
                • 
+
              
 
 
              Adding Items to the List
              
 
- 
              Items are added with elm_list_item_append() or elm_list_item_prepend(). Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.
              
+ 
              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.
              
 
 
               Evas_Object *list;
 int i;
 
 // This function is called when the list item is selected 
-static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+_selected_item_cb(void *data, Evas_Object *obj, void *event_info)
 {
    Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
    Eina_Bool selected = elm_list_item_selected_get(list_it);
@@ -115,12 +124,11 @@ for (i = 0; i < 10; i++)
    // Add item to the list 
    elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
 }
-
 
              
  
 
              Changing the Text or Icon of an Item
              
 
-
              If you want to change the state of an item, you can do it by using all the functions relative to Elm_Object_Item. Each item of the list contains two instances of an evas_object. Give those as the third and the fourth arguments when you append or prepend the item in the list. The evas_object instances are changed with elm_object_item_part_content_set. The first object is referenced as the start object in the theme, whereas the second one is referenced as the end object. Give these names when you use the elm_object_item_part_content_set. The label of the item is changed by using elm_object_item_text_set.
              
+
              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.
              
 
 
               Evas_Object *list;
@@ -145,7 +153,7 @@ elm_object_item_text_set(it, "I've been selected !");
   
 
              Retrieving Selected Items
              
 
- 
              The list of the currently selected items is retrieved with elm_list_selected_items_get(). If the multiselect mode is false, you can retrieve the only selected item with elm_list_selected_item_get(). For example, this is how to unselect all previously 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.
              
 
 
               Evas_Object *list; Eina_List *l;
@@ -158,15 +166,15 @@ EINA_LIST_FOREACH(selected_items, l, it)
    elm_list_item_selected_set(it, EINA_FALSE);
 
              
 
-
              List Item Operations
              
+
              Using List Item Operations
              
 
- 
              To find out if an item is selected, call elm_list_item_selected_get. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.
              
+
              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.
              
 
- 
              Elementary list provides two functions for sliding a list to a specific item. elm_list_item_show shows the item passed as an argument, whereas elm_list_item_bring_in shows the item, but only after animating the slide.
              
+
              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 function elm_list_item_prev, or to the one immediately following a specific item with the function elm_list_item_next.
              
+
              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.
              
 
- 
              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. 
              
+
              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. 
              
 
 
               Evas_Object *list;
@@ -180,22 +188,22 @@ elm_list_item_bring_in(next);
 
 
              Using List Callbacks
              
 
- 
              The list emits the following signals: 
               
+ 
              The list component emits the following signals: 
               
   
                 
-   
              • activated: The user double-clicks or presses (enter | return | spacebar) on an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • clicked,double: The user double-clicks an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • selected: The user selects an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • unselected: The user unselects an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • longpressed: The user long-presses an item. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • activated: The item is double-clicked or pressed (enter | return | spacebar). The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • clicked,double: The item is double-clicked. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • selected: The item is selected. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • unselected: The item is unselected. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • longpressed: The item is long-pressed. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
    
              • edge,top: The list is scrolled to the top edge.
                •  
    
              • edge,bottom: The list is scrolled to the bottom edge.
                •  
    
              • edge,left: The list is scrolled to the left edge.
                •  
    
              • edge,right: The list is scrolled to the right edge.
                •  
-   
              • highlighted: The user highlights an item on the list. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
-   
              • unhighlighted: The user unhighlights an item in the list. The event_info parameter of the callback function contains a pointer to the item activated.
                •   
+   
              • highlighted: An item on the list is highlighted. The event_info parameter of the callback function contains a pointer to the item activated.
                •  
+   
              • unhighlighted: An item in the list is unhighlighted. The event_info parameter of the callback function contains a pointer to the item activated.
                •   
   
              
 
-
              You can register to the clicked,double signal with the following code. Note that the currently double-clicked item can be retrieved using the event_info pointer. This code registers to the double,clicked signal and unselects the item that has been double-clicked.
              
+
              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.
              
 
 
               {
@@ -206,7 +214,8 @@ elm_list_item_bring_in(next);
 
 // Callback function for the "clicked" signal
 // This callback is called when the button is clicked by the user
-void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+void 
+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);
diff --git a/org.tizen.ui.practices/html/native/efl/component_map_mn.htm b/org.tizen.ui.practices/html/native/efl/component_map_mn.htm
index 668b5d8..72c0fc1 100644
--- a/org.tizen.ui.practices/html/native/efl/component_map_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_map_mn.htm
@@ -24,7 +24,7 @@
 		
              Content
              
 		
                
 			
              • Adding a Map Component
                • 
-			
              • Playing with the Map
                • 
+			
              • Using the Map
                • 
 			
              • Drawing Overlays
                • 
 			
              • Calculating Routes
                • 
 			
              • Using Map Callbacks
                • 
@@ -42,9 +42,9 @@
 
 
                This feature is supported in mobile applications only.
                
 
-
                The map component displays a geographic map. The default map data are provided by the OpenStreetMap project (http://www.openstreetmap.org/). Custom providers can also be added.
                
+
                The map component displays a geographic map. The default map data are provided by the OpenStreetMap project. Custom providers can also be added.
                
 
-
                This UI component supports:
                
+
                The map component supports:
                
   
                   
    
                • Zooming
                  •  
    
                • Scrolling
                  •  
@@ -53,14 +53,16 @@
    
                • Routes
                  •  
   
                
 
-
                The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.
                
+
                The map component implements the scroller interface, which means that the scroller functions can also be used with maps.
                
+
+
                For more information, see the Map API.
                
 
 
                Figure: Map hierarchy
                 
 
                 Map hierarchy 
                  
 
 
                Adding a Map Component
                
 
-
                Once created with the elm_map_add() function, zoom level x12 can be set.
                
+
                Create the map component with the elm_map_add() function, and set the zoom level to 12:
                
 
 
                 Evas_Object *map, *parent;
@@ -70,32 +72,40 @@ elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
 elm_map_zoom_set(map, 12);
 
                
 
-
                Here the zoom mode is set to manual, but it can also be set to the ELM_MAP_ZOOM_MODE_AUTO_FIT mode and the ELM_MAP_ZOOM_MODE_AUTO_FILL mode. In that case however, the elm_map_zoom_set() function cannot be used.
                
+
                In this example, the zoom mode is set to manual, but it can also be set to the ELM_MAP_ZOOM_MODE_AUTO_FIT mode and the ELM_MAP_ZOOM_MODE_AUTO_FILL mode. In that case however, the elm_map_zoom_set() function cannot be used.
                
 
-
                Playing with the Map
                
+
                Using the Map
                
 
-
                If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.
                
+
                To use the map:
                
+
                  
+
                • 
+
                  Show a specific area on the map based on coordinates (2 2 N, 48 8 E):
                  
 
                   elm_map_region_show(map, 2.2, 48.8);
 
                  
 
-
                  This shows the desired coordinates. The location can also be shown with a bring-in animation.
                  
+
                  The example shows the desired coordinates.
                  
+
                  The location can also be shown with a bring-in animation.
                  
 
                   elm_map_region_bring_in(map, 2.2, 48.8);
 
                  
-
-
                  The map is rotated 90 degrees around the current position.
                  
+
                  • 
+
                • 
+
                  Rotate the map 90 degrees around the current position:
                  
 
                   elm_map_rotate_set(map, 90, 2.2, 48.8);
 
                  
+
                  • 
+
                
 
 
                Drawing Overlays
                
 
 
                Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.
                
 
-
                Creating an Overlay Class
                
-
-
                Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.
                
+
                To draw overlays:
                
+
                  
+
                1. Create an overlay class.
+
                  Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is bigger than 8.
                  
 
 
                  Set an icon ("Home" icon) to the forest class. This icon is displayed in place of the forest class on the map.
                  
 
                  @@ -110,10 +120,10 @@ icon = elm_icon_add(map);
 elm_icon_standard_set(icon, "home");
 elm_map_overlay_icon_set(forest_class, icon);
 
                  
+
                  2. 
 
-
                  Adding Overlays to a Class
                  
-
-
                  After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the elm_map_overlay_data_set() function. Set the name of the forest in the data. The icon can be set to the overlay with the elm_map_overlay_icon_set() function.
                  
+
                2. Add overlays to the class.
+
                  After creating a forest class, it is possible to add overlay objects to it. In this example, an overlay for the Meudon forest is created. The data is linked to the overlay with the elm_map_overlay_data_set() function. Set the name of the forest in the data. The icon can be set to the overlay with the elm_map_overlay_icon_set() function.
                  
 
   
            
     
         
            
 
  
  
 
 
 
 
             
@@ -150,16 +160,15 @@ 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 two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.
            
+
            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.
             elm_map_overlay_class_zoom_max_set(forest_class, 8);
 
            
 
-
            In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.
            
-
-
            Creating Bubbles Following Overlays
            
 
-
            The following example shows how to set a content in a bubble following an overlay.
            
+
+
          • Add bubbles to follow an overlay.
+
            The following example shows how to set content in a bubble following an overlay.
            
 
 
             // Add an overlay bubble object 
@@ -169,37 +178,39 @@ 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.
            
-
-
            Content is added to the bubble with the elm_map_overlay_bubble_content_append() function.
            
+
            Once following an overlay, the bubble appears, moves, or hides following the parent overlay's behavior.
            
 
-
            Adding Other Overlays
            
+
            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.
            
 
             Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
 
            
 
-
            You can also add a scale at the 200x0 coordinate (in pixels).
            
+
            You can also add a scale at the 200 x 0 coordinate (in pixels).
            
 
             Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
 
            
 
 
            You can also draw a line, a polygon, or a route. For a full description of these functions, see the Map API.
            
+
            • 
+
            Calculating Routes
            
 
-
            A route between a starting point and an ending point is calculated with the elm_map_route_add() call. The type of transport and the routing calculation method can be provided so as to have the desired result.
            
+
            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.
            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.
             Elm_Map_Route *route = elm_map_route_add(map,
-         ELM_MAP_ROUTE_TYPE_BICYCLE,
-         ELM_MAP_ROUTE_METHOD_FASTEST,
-         2.20718, 48.79759,
-         2.1699, 48.8189,
-         NULL, NULL);
+                                         ELM_MAP_ROUTE_TYPE_BICYCLE,
+                                         ELM_MAP_ROUTE_METHOD_FASTEST,
+                                         2.20718, 48.79759,
+                                         2.1699, 48.8189,
+                                         NULL, NULL);
 
 // Add a callback to when the route has been calculated and loaded 
 evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
@@ -221,10 +232,10 @@ _route_loaded_cb(void *data, Evas_Object *obj, void *ev)
 
 
            The map component emits the following callbacks:
            
 
               
-   
            • clicked: The user has clicked the map without dragging around.
              •  
-   
            • clicked,double: The user has double-clicked the map.
              •  
-   
            • press: The user has pressed down on the map.
              •  
-   
            • longpressed: The user has pressed down on the map for a long time without dragging around.
              • 
+   
            • clicked: The map is clicked without dragging around.
              •  
+   
            • clicked,double: The map is double-clicked.
              •  
+   
            • press: The map is pressed down on.
              •  
+   
            • longpressed: The map is pressed down for a long time without dragging around.
              • 
    
            • scroll: The content is scrolled (moved).
              •  
    
            • scroll,drag,start: Dragging the contents around starts.
              •   
    
            • scroll,drag,stop: Dragging the contents around stops.
              •  
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 a753099..45f1870 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
@@ -41,6 +41,8 @@
 
              This feature is supported in mobile applications only.
              
 
   
              The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time. The popup component is very similar to the notify component, but supports many common layouts.
              
+  
+  
              For more information, see the Notify API.
              
 
   
              Figure: Notify component
               
 
               Notify component 
                 
@@ -49,7 +51,7 @@
   
 
              Adding a Notify Component
               
   
-
              The following example shows how to add a notify object.
              
+
              To add a notify object, use the elm_notify_add() function:
              
 
 
               Evas_Object *notify, *parent;
@@ -58,7 +60,11 @@ notify = elm_notify_add(parent);
 
 
              Configuring the Notify Component
               
 
-
              Create a label and add it to the notify object.
              
+
              To configure the notify component:
              
+
+
                
+
              • 
+
                Create a label and add it to the notify object:
                
 
 
                 Evas_Object *content;
@@ -72,19 +78,23 @@ evas_object_show(content);
 // Add the label object to the notify component
 elm_object_content_set(notify, content);
 
                
-
+
                • 
+
              • 
 
                In the following example, the notify object is shown on the bottom center of the parent object. The parameter has a value between 0.0 and 1.0, which means the portion of the notify component's position in the parent window. The ELM_NOTIFY_ALIGN_FILL attribute can be used to fill the notify component in each axis direction.
                
 
 
                 elm_notify_align_set(notify, 0.5, 1.0);
 evas_object_show(notify);
 
                
-
-
                Set a timeout interval, after which the notify component is hidden. In the following example, the timeout interval is five seconds.
                
+
                • 
+
              • 
+
                Set a timeout interval, after which the notify component is hidden. In the following example, the timeout interval is 5 seconds.
                
 
 
                 elm_notify_timeout_set(notify, 5.0);
 
                
+
                • 
+
              
 
 
              Using Notify Callbacks
               
 
@@ -106,7 +116,8 @@ elm_notify_timeout_set(notify, 5.0);
 // Callback function for the "timeout" signal
 // The timeout expires and the notify object is hidden
  
-void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+timeout_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_notify_wn.htm b/org.tizen.ui.practices/html/native/efl/component_notify_wn.htm
index 19dab41..1e48d06 100644
--- a/org.tizen.ui.practices/html/native/efl/component_notify_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_notify_wn.htm
@@ -42,13 +42,14 @@
 
              This feature is supported in wearable applications only.
              
 
   
              The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.
              
+  
              For more information, see the Notify API.
              
 
     
              Figure: Notify hierarchy
               
 
               Notify hierarchy 
               
   
 
              Adding a Notify Component
               
   
-
              The following example shows how to create a notify object.
              
+
              To add a notify object, use the elm_notify_add() function:
              
 
               Evas_Object *notify, *parent;
 notify = elm_notify_add(parent);
@@ -56,7 +57,12 @@ notify = elm_notify_add(parent);
 
 
              Configuring the Notify Component
               
 
-
              Create a label and add it to the notify object.
              
+
              To configure the notify component:
              
+
+
                
+
              • 
+
                Create a label and add it to the notify object:
                
+
 
                 Evas_Object *content;
 
@@ -69,17 +75,22 @@ evas_object_show(content);
 // Add the label object to the notify component
 elm_object_content_set(notify, content);
 
                
-
-
                In the following example the notify object is shown on the bottom left corner of the parent object.
                
+
                • 
+
              • 
+
                In the following example, the notify object is shown on the bottom left corner of the parent object.
                
 
                 elm_notify_align_set(notify, 1.0, 1.0);
 evas_object_show(notify);
 
                
+
                • 
+
              • 
+
                Set a timeout interval, after which the notify component is hidden. In the following example, the timeout interval is 5 seconds.
                
 
-
                Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.
                
 
                 elm_notify_timeout_set(notify, 5.0);
 
                
+
                • 
+
              
 
 
              Using Notify Callbacks
               
 
@@ -101,7 +112,8 @@ elm_notify_timeout_set(notify, 5.0);
 // Callback function for the "timeout" signal
 // The timeout expires and the notify object is hidden
  
-void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+timeout_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_panel_mn.htm b/org.tizen.ui.practices/html/native/efl/component_panel_mn.htm
index 9f0aaf7..f07bd02 100644
--- a/org.tizen.ui.practices/html/native/efl/component_panel_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_panel_mn.htm
@@ -44,7 +44,9 @@
 
    
              The panel component is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.
              
 
-   
              Panel inherits from layout component, so the layout API can be used on this UI component.
              
+   
              The panel component inherits from the layout component, which means that layout functions can be used on the panel component.
              
+   
+   
              For more information, see the Panel API.
              
 
         
              Figure: Panel component
               
 
               Panel component 
               
@@ -54,7 +56,7 @@
    
 
              Adding a Panel Component
              
 
-
              The following example shows how to add a panel and set its orientation to the left.
              
+
              To add a panel and set its orientation to the left:
              
 
 
               Evas_Object *panel, *parent;
@@ -65,25 +67,34 @@ elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
 
 
              Using the Panel
              
 
-
              The panel can be manually hidden.
              
+
              To use the panel:
              
+
                
+
              • 
+
                Hide the panel manually:
                
 
                 elm_panel_hidden_set(pan, EINA_TRUE);
 
                
-
-
                The panel can be toggled if you do not know the hidden state of the UI component.
                
+
                • 
+
              • 
+
                Toggle the panel if you do not know the hidden state of the UI component:
                
 
                 elm_panel_toggle(pan);
 
                
-
-
                The panel can be set scrollable.
                
+
                • 
+
              • 
+
                Set the panel to be scrollable:
                
 
                 elm_panel_scrollable_set(pan, EINA_TRUE);
 
                
+
                • 
+
              
 
 
              Creating a Drawer
              
 
-
              Tizen SDK has implemented a layout theme to add a drawer in the application. This example shows how to add a new Elementary layout object and set the theme of this layout to the drawer.
              
-
+
              Tizen SDK has implemented a layout theme to add a drawer in the application.
              
+
              To add a new Elementary layout object and set the theme of this layout to the drawer:
              
+
                
+
              1. Create the layout object and the drawer:
 
                 Evas_Object *layout;
 
@@ -94,9 +105,9 @@ elm_layout_theme_set(layout, "layout", "drawer", "panel
 // Show the new layout
 evas_object_show(layout);
 
                
-
-
                Once the panel object is created, it can be swallowed in the new layout.
                
-
+
                2. 
+
              2. 
+
                Create the panel object and swallow the it in the new layout:
                
 
                 panel = elm_panel_add(layout);
 elm_panel_scrollable_set(panel, EINA_TRUE);
@@ -108,7 +119,8 @@ evas_object_show(panel);
 elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
 elm_object_part_content_set(layout, "elm.swallow.left", panel);
 
                
-
+
                3. 
+
              3. Set the panel background and toggle button.
 
                You can set content to the elm.swallow.bg. You must set a button on the naviframe/drawers part.
                
 
                 // Panel background (dimmed area) 
@@ -124,10 +136,12 @@ elm_object_style_set(btn, "naviframe/drawers");
 evas_object_smart_callback_add(btn, "clicked", btn_cb, panel);
 elm_object_item_part_content_set(nf_it, "drawers", btn);
 
                
+
                4. 
+
              
 
 
              Using Panel Callbacks
              
 
-
              You can register a callback on the scroll signal, when the user scrolls the panel. The event_info parameter is of the type Elm_Panel_Scroll_Info.
              
+
              You can register a callback on the scroll signal, when the user scrolls the panel. The event_info parameter is of the Elm_Panel_Scroll_Info type.
              
 
 
               {
diff --git a/org.tizen.ui.practices/html/native/efl/component_photocam_mn.htm b/org.tizen.ui.practices/html/native/efl/component_photocam_mn.htm
index 161d139..d759b26 100644
--- a/org.tizen.ui.practices/html/native/efl/component_photocam_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_photocam_mn.htm
@@ -40,17 +40,18 @@
 
 
              This feature is supported in mobile applications only.
              
 
-  
              The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for .jpeg images format and has a low memory footprint.
              
-
-  
              This UI component implements the scroller interface, so all the functions concerning the scroller can be used with the photocam component.
              
+  
              The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for the .jpeg images format and has a low memory footprint.
              
 
+  
              The photocam component implements the scroller interface, which means that scroller functions can be used with the photocam component.
              
+  
+  
              For more information, see the Photocam API.
              
   
   
              Figure: Photocam hierarchy
               
 
               Photocam hierarchy 
               
   
 
              Adding a Photocam Component
              
 
-
              The following example shows how to create a photocam component and set an image file on it.
              
+
              To create a photocam component and set an image file on it:
              
 
 
               Evas_Object *photocam;
@@ -60,33 +61,39 @@ elm_photocam_file_set(photocam, "/tmp/photo.jpeg");
 
 
              Using Photocam Zoom
              
 
-
              You can choose between two automatic zoom modes and a manual zoom mode. In the following example the zoom mode is set to manual and a double zoom is requested.
              
+
              To use the photocam zoom:
              
+
                
+
              • 
+
                Set the zoom mode. You can choose between 2 automatic zoom modes and a manual zoom mode. In the following example, the zoom mode is set to manual and a double zoom is requested.
                
 
                 elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
 elm_photocam_zoom_set(photocam, 2.0);
 
                
 
 
                The zoom mode can be set to ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL to fill all the pixels of the photocam component.
                
-
-
                Multi-touch zooming is activated by enabling gestures.
                
+
                • 
+
              • 
+
                Activate the multi-touch zooming by enabling gestures:
                
 
                 elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
 
                
-
-
                You can zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.
                
-
+
                • 
+
              • 
+
                Zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200 x 200), with a width of 400 px and a height of 300 px.
                
 
                 elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
 
                
+
                • 
+
              
 
 
              Using Photocam Callbacks
              
 
 
              The photocam component emits the following signals:
              
 
                 
-   
              • clicked: The user has clicked the photo without dragging around.
                •  
-   
              • press: The user has pressed down on the photo.
                •  
-   
              • longpressed: The user has pressed down on the photo for a long time without dragging around.
                •  
-   
              • clicked,double: The user has double-clicked the photo.
                •  
+   
              • clicked: The photo has been clicked without dragging around.
                •  
+   
              • press: The photo has been pressed.
                •  
+   
              • longpressed: The photo has been pressed down for a long time without dragging around.
                •  
+   
              • clicked,double: The photo has been  double-clicked.
                •  
    
              • load: The photo load begins.
                •  
    
              • loaded: The image file load is complete for the first view (a low resolution blurry version).
                •  
    
              • load,detail: A photo detailed data load begins.
                •  
@@ -106,7 +113,8 @@ elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
 
                The following example shows how to register a callback on the loaded signal.
                
 
 
                -void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
+void 
+message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
 {
    evas_object_smart_callback_add(photocam, "loaded", loaded_cb, data);
 }
@@ -114,7 +122,8 @@ void message_port_cb(int local_port_id, const char *remote_app_id, bundle *messa
 // Callback function for the "loaded" signal
 // The photocam has loaded the photo file in a low resolution
  
-void loaded_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+loaded_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The photo has been loaded\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_plug_mn.htm b/org.tizen.ui.practices/html/native/efl/component_plug_mn.htm
index a2357a0..3fe1159 100644
--- a/org.tizen.ui.practices/html/native/efl/component_plug_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_plug_mn.htm
@@ -42,13 +42,14 @@
 
 
                The plug component shows an Evas_Object created by an other process. It can be used anywhere the same way as any other elementary UI component.
                
 
+
                For more information, see the Plug API.
                
 
   
                Figure: Plug hierarchy
                 
 
                 Plug hierarchy 
                 
 
 
                Adding a Plug Component
                  
 
-
                The following example shows how to create a plug.
                
+
                To create a plug, use the elm_plug_add() function:
                
 
 
                 Evas_Object *plug, *parent;
@@ -57,15 +58,19 @@ plug = elm_plug_add(parent);
 
 
                Using the Plug
                
 
+
                To use the plug:
                
+
                  
+
                1. 
 
                  The socket image provides the service where to connect the plug object with the elm_plug_connect() function. In this process, use the service name and number set by the socket you want to connect to.
                  
 
-
                  As an example, connect to a service named plug_test on the number 0.
                  
+
                  The following example connects to a service named plug_test on the number 0.
                  
 
 
                   elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
 
                  
-
-
                  The Evas_Object corresponding to the distant image is retrieved with the elm_plug_image_object_get() function.
                  
+
                  2. 
+
                2. 
+
                  Retrieve the Evas_Object corresponding to the distant image with the elm_plug_image_object_get() function:
                  
 
 
                   Evas_Object *plug_img = elm_plug_image_object_get(plug);
@@ -89,12 +94,14 @@ Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
 // Create a socket named "plug_test" and listen to it
 elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
 
                  
+
                  3. 
+
                
 
 
                Using Plug Callbacks
                
 
 
                The plug component emits the following signals:
                
 
                  
-
                • clicked: The user clicked the image (press/release). The event parameter of the callback is NULL.
                  • 
+
                • clicked: The image was clicked (press/release). The event parameter of the callback is NULL.
                  • 
 
                • image,deleted: The server side was deleted. The event parameter of the callback is NULL.
                  • 
 
                • image,resized: The server side was resized. The event parameter of the callback is Evas_Coord_Size (2 integers).
                  • 
 
                
diff --git a/org.tizen.ui.practices/html/native/efl/component_popup_mn.htm b/org.tizen.ui.practices/html/native/efl/component_popup_mn.htm
index 6eef626..555eb6a 100644
--- a/org.tizen.ui.practices/html/native/efl/component_popup_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_popup_mn.htm
@@ -42,15 +42,16 @@
 
 
                This feature is supported in mobile applications only.
                
 
-
                 The popup component shows a popup area that can contain:
                
+
                 The popup component shows a popup area that can contain the following:
                
 
                  
-
                • a title area (optional)
                  • 
-
                • a content area
                  • 
-
                • an action area (optional)
                  • 
+
                • Title area (optional)
                  • 
+
                • Content area
                  • 
+
                • Action area (optional)
                  • 
 
                
 
-
                The optional title area can contain an icon and text, the action area can contain up to three buttons.
                
+
                The optional title area can contain an icon and text, the action area can contain up to 3 buttons.
                
 
+
                For more information, see the Popup API.
                
 
 
                Figure: Popup component
                 
 
                Popup component
                
@@ -60,7 +61,7 @@
 
 
                Adding a Popup Component
                
 
-
                The following example shows how to create a popup component.
                
+
                To create a popup component, use the elm_popup_add() function:
                
 
                 Evas_Object *popup, *parent;
 
@@ -78,14 +79,19 @@ popup = elm_popup_add(parent);
 
              • theme_bg
                • 
 
              
 
-
              The following example sets the popup style as toast:
              
-
              elm_object_style_set(popup, "toast");
              
+
              To set the popup style as toast:
              
+
              +elm_object_style_set(popup, "toast");
+
              
 
 
              Figure: Popup toast style
               
 
              Popup toast style
              
 
 
              Setting the Popup Areas
              
 
+
              To set the popup areas:
              
+
                
+
              1. 
 
                Configure the title area. Set the icon object using the part name title,icon. Set the title text as Test popup using the partname title,text.
                
 
 
                @@ -97,7 +103,8 @@ elm_object_part_content_set(popup, "title,icon", icon);
 // Set the title text 
 elm_object_part_text_set(popup, "title,text", "Test popup");
 
                
-
+
                2. 
+
              2. 
 
                Set the content of the popup. The content can be simple text.
                
 
 
                @@ -111,8 +118,9 @@ Evas_Object *content;
 
 elm_object_content_set(popup, content);
 
                
-
-
                Set the buttons of the action area by creating an OK button, a Cancel button, and a Help button.
                
+
                3. 
+
              3. 
+
                Set the buttons of the action area by creating an OK button, a Cancel button, and a Help button:
                
 
 
                 Evas_Object *button1, *button2;
@@ -129,19 +137,20 @@ elm_object_text_set(button2, "Cancel");
 elm_object_part_content_set(popup, "button1", button1);
 elm_object_part_content_set(popup, "button2", button2);
 
                
-
+
                4. 
+
              
 
              Setting the Popup Orientation
              
 
-
              The popup orientation can be set with the elm_popup_align_set() function. The parameter has the value between 0.0 and 1.0, which means the portion of the popup position in the parent object. The ELM_NOTIFY_ALIGN_FILL parameter is used to fill the popup in each axis direction.
              
+
              To set the popup orientation, use the elm_popup_align_set() function. The parameter has the value between 0.0 and 1.0, which means the portion of the popup position in the parent object. The ELM_NOTIFY_ALIGN_FILL parameter is used to fill the popup in each axis direction.
              
 
               elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
 
              
 
 
              Using Popup Callbacks
              
-
              The popup emits the following signals:
              
+
              The popup component emits the following signals:
              
 
                
 
              • timeout: The popup is closed as a result of timeout.
-
                elm_popup_timeout_set() is used to hide the popup after a certain time. In this example, the timeout is set to five seconds.
                
+
                The elm_popup_timeout_set() function is used to hide the popup after a certain time. In the following example, the timeout is set to 5 seconds.
                
 
 
                 elm_popup_timeout_set(popup, 5.0);
@@ -161,8 +170,8 @@ _timeout_cb(void *data, Evas_Object *obj, void *event_info)
 }
 
                
 
                • 
-
              • block,clicked: The user clicks on the Blocked Event area.
-
                The visible region of the popup is surrounded by a translucent region called Blocked Event area. By clicking on this area, the signal block,clicked is sent to the application.
                • 
+
              • block,clicked: The user clicks on the blocked event area.
+
                The visible region of the popup is surrounded by a translucent region called blocked event area. By clicking on this area, the signal block,clicked is sent to the application.
                • 
 
              • dismissed: The popup is dismissed with a hide effect.
 
                The elm_popup_dismiss() function is used to dismiss the popup with a hide effect:
                
 
                @@ -178,7 +187,8 @@ elm_popup_dismiss(popup);
 
 // Callback function for the "dismissed" signal
 // This callback is called when the popup is dismissed
-void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "dismissed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_popup_wn.htm b/org.tizen.ui.practices/html/native/efl/component_popup_wn.htm
index fb8f950..7d39ffd 100644
--- a/org.tizen.ui.practices/html/native/efl/component_popup_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_popup_wn.htm
@@ -25,8 +25,8 @@
 		
 			
                Related Info
                
@@ -43,14 +43,16 @@
 
 
                This feature is supported in wearable applications only.
                
 
-
                The popup component shows a popup area that can contain:
                
+
                 The popup component shows a popup area that can contain the following:
                
 
                  
-
                • a title area (optional)
                  • 
-
                • a content area
                  • 
-
                • an action area (optional)
                  • 
+
                • Title area (optional)
                  • 
+
                • Content area
                  • 
+
                • Action area (optional)
                  • 
 
                
 
-
                The optional title area can contain an icon and text, the action area can contain up to three buttons.
                
+
                The optional title area can contain an icon and text, the action area can contain up to 3 buttons.
                
+
+
                For more information, see the Popup API.
                
 
 
                Figure: Popup component
                 
 
                Popup component
                
@@ -60,7 +62,7 @@
 
 
                Adding a Popup Component
                
 
-
                The following example shows how to create a popup component.
                
+
                To create a popup component, use the elm_popup_add() function:
                
 
                 Evas_Object *popup, *parent;
 
@@ -70,17 +72,17 @@ popup = elm_popup_add(parent);
 
 
                Using Popup Styles
                
 
-
                The following item styles are available for the rectangular UI component:
                
+
                The following item styles are available for the rectangular screen:
                
 
                  
 
                • popup
                  • 
 
                • toast
                  • 
 
                
-
                The following item styles are available for the circular UI component:
                
+
                The following item styles are available for the circular screen:
                
 
                  
 
                • circle
                  • 
 
                • toast/circle
                  • 
 
                
-
                The following layout styles are available for the circular UI component:
                
+
                The following layout styles are available for the circular screen:
                
 
                  
 
                • content/circle
                  • 
 
                • content/circle/buttons1
                  • 
@@ -93,12 +95,18 @@ elm_object_style_set(popup, "toast");
 
                
 
 
-
                Setting the Popup Areas for Rectangular UI Components
                
-
                Configure the title area. Set the title text to Test popup using the partname title,text.
                
+
                Setting the Popup Areas for a Rectangular Screen
                
+
+
                To set the popup areas:
                
+
                  
+
                1. 
+
                  Configure the title area. Set the icon object using the part name title,icon. Set the title text as Test popup using the partname title,text.
                  
 
 
                   elm_object_part_text_set(popup, "title,text", "Test popup");
 
                  
+
                  2. 
+
                2. 
 
                  Set the content of the popup. The content can be simple text.
                  
 
                   elm_object_text_set(popup, "simple text");
@@ -109,11 +117,14 @@ Evas_Object *content;
 
 elm_object_content_set(popup, content);
 
                  
-
                  Set the buttons of the action area by creating an OK button and a Cancel button.
                  
+
                  3. 
+
                3. 
+
                  Set the buttons of the action area by creating an OK button, a Cancel button, and a Help button:
                  
+
 
                   Evas_Object *button1, *button2;
 
-// Create the two buttons 
+// Create the 2 buttons 
 button1 = elm_button_add(popup);
 elm_object_style_set(button1, "popup");
 evas_object_size_hint_weight_set(button1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
@@ -130,8 +141,13 @@ evas_object_show(popup);
 elm_object_part_content_set(popup, "button1", button1);
 elm_object_part_content_set(popup, "button2", button2);
 
                  
+
                  4. 
+
                
 
-
                Setting the Popup Areas for Circular UI Components
                
+
                Setting the Popup Areas for a Circular Screen
                
+
+
                  
+
                1. 
 
                  Set the circle style and the layout of the popup.
                  
 
                   // Setting the style
@@ -141,13 +157,15 @@ elm_object_style_set(popup, "circle");
 layout = elm_layout_add(popup);
 elm_layout_theme_set(layout, "layout", "popup", "content/circle/buttons2");
 
                  
-
-
                  To configure the title area, set the title text to Test popup using the partname elm.text.title.
                  
+
                  2. 
+
                2. 
+
                  To configure the title area, set the title text to Test popup using the elm.text.title partname.
                  
 
                   // Setting the title text 
 elm_object_part_text_set(layout, "elm.text.title", "Text popup");
 
                  
-
+
                  3. 
+
                3. 
 
                  Set the content of the popup. The content can be simple text.
                  
 
                  elm_object_part_text_set(layout, "elm.text.content", "Test popup");
 
                  
@@ -158,13 +176,15 @@ Evas_Object *content;
 
 elm_object_content_set(layout, content);
 
                
-
                Set the popup content.
                
+
                • 
+
              • 
+
                Set the popup content:
                
 
                 elm_object_content_set(popup, layout);
 
                
-
-
                Set the buttons of the action area by creating an OK button, a Cancel button, and a Help button.
                
-
+
                • 
+
              • 
+
                Set the buttons of the action area by creating an OK button, a Cancel button, and a Help button:
                
 
                 Evas_Object *button1, *button2, *icon;
 
@@ -189,18 +209,18 @@ evas_object_show(icon);
 // Set the buttons to the action area 
 elm_object_part_content_set(popup, "button1", button1);
 elm_object_part_content_set(popup, "button2", button2);
-
 
                
+
                • 
+
 
 
                Using Popup Callbacks
                
-
                The popup emits the following signals:
                
+
                The popup component emits the following signals:
                
 
                  
-
                • timeout: The popup is closed as a result of timeout.
                  • 
-
                • block,clicked: The user clicks on the Blocked Event area.
                  • 
-
                
-
-
                elm_popup_timeout_set() is used to hide the popup after a certain time. In the following example the timeout is set to five seconds.
                
-
                elm_popup_timeout_set(popup, 5.0);
                
+
              • timeout: The popup is closed as a result of timeout.
+
                The elm_popup_timeout_set()  function is used to hide the popup after a certain time. In the following example, the timeout is set to 5 seconds.
                
+
                +elm_popup_timeout_set(popup, 5.0);
+
                
 
 
                When the timeout expires, the timeout signal is sent to the user.
                
 
                @@ -214,8 +234,12 @@ _timeout_cb(void *data, Evas_Object *obj, void *event_info)
    dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
 }
 
                
+
                • 
+
              • block,clicked: The user clicks on the blocked event area.
+
                The visible region of the popup is surrounded by a translucent region called blocked event area. By clicking on this area, the signal block,clicked is sent to the application.
                • 
+
              
+
 
-
              The visible region of the popup is surrounded by a translucent region called Blocked Event area. By clicking on this area, the signal block,clicked is sent to the application.
              
 
 
             
    
 
 
 
 
 
 
 
            
diff --git a/org.tizen.ui.practices/html/native/efl/component_progressbar_mn.htm b/org.tizen.ui.practices/html/native/efl/component_progressbar_mn.htm
index 0fd1cdb..f021c42 100644
--- a/org.tizen.ui.practices/html/native/efl/component_progressbar_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_progressbar_mn.htm
@@ -42,7 +42,9 @@
 
 
            This feature is supported in mobile applications only.
            
 
-
            The progressbar component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.
             
+
            The progressbar component is used to display the progress status of a given job. It inherits from the layout component, which means that the layout component functions can be used on the progressbar component.
             
+
+
            For more information, see the Progress bar API.
            Figure: Progressbar component
            Progressbar component
            
@@ -53,7 +55,7 @@
 
 
            Adding a Progressbar Component
            
 
-
            The following example shows how to create a progressbar component.
            
+
            To create a progressbar component, use the elm_progressbar_add() function:
             Evas_Object *pb = elm_progressbar_add(win);
@@ -70,57 +72,74 @@ Evas_Object *pb = elm_progressbar_add(win);
 
          • process_small
            • 
 
 
-
            Set the style of the progressbar to pending_list.
            
+
            In the following example, the style of the progressbar is set to pending_list.
            
 
-
            elm_object_style_set(pb, "pending_list");
            
+
            +elm_object_style_set(pb, "pending_list");
+
            
 
 
            Using the Progressbar
            
 
 
            By default, the progressbar does not show a label or an icon, and the unit label is set to %.0f %%.
            
 
-
            The following example shows how to set a label. In this example it is named Test label.
            
-
+
            To modify the label, icon, and unit label:
            
+
              
+
            • 
+
              Set a label. In this example it is named Test label.
              
 
               elm_object_text_set(pb, "Test label");
 
              
-
-
              An icon is set with elm_object_part_content_set() using the partname icon.
              
+
              • 
+
            • 
+
              Set an icon with the elm_object_part_content_set() function using the icon partname:
              
 
               elm_object_part_content_set(pb, "icon", icon_object);
 
              
-
-
              The unit label format string can be modified using a printf style format. Set it to be a float number with two decimals.
              
+
              • 
+
            • 
+
              Modify the unit label format string using a printf style format. Set it to be a float number with 2 decimals.
              
 
               elm_progressbar_unit_format_set(pb, "%1.2f%%");
 
              
+
              • 
+
            
 
 
            Configuring the Progressbar
            
 
-
            The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.
            
+
            To configure the progressbar:
            
+
              
+
            • 
+
              Activate the progressbar pulse mode to make the progressbar loop infinitely between the start and end position:
              
 
               elm_progressbar_pulse_set(pb, EINA_TRUE);
 elm_progressbar_pulse(pb, EINA_TRUE);
 
              
-
-
              The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.
              
+
              • 
+
            • 
+
              Invert the progressbar. In the inverted mode the high values are on the left and the low values on the right.
              
 
               elm_progressbar_inverted_set(pb, EINA_TRUE);
 
              
-
-
              The progressbar emits the changed signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.
              
+
              • 
+
            • 
+
              Change the value with the elm_progressbar_value_set() function. The progressbar emits the changed signal when the progress value changes. In the following example, the pb progress value is set to 20%.
              
 
               elm_progressbar_value_set(pb, 0.2);
 
              
-
-
              The current value can be read.
              
+
              • 
+
            • 
+
              Read the current value:
              
 
               double value = elm_progressbar_value_get(pb);
 
              
-
-
              You can set the orientation of the progressbar to vertical instead of the default horizontal orientation.
              
+
              • 
+
            • 
+
              Set the orientation of the progressbar to vertical instead of the default horizontal orientation:
              
 
               elm_progressbar_horizontal_set(pb, EINA_FALSE);
 
              
+
              • 
+
            
 
 
            Using the Progressbar Callbacks
            
 
@@ -135,7 +154,8 @@ elm_progressbar_horizontal_set(pb, EINA_FALSE);
 
 // Callback function for the "changed" signal
 // This callback is called when the progressbar value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_progressbar_wn.htm b/org.tizen.ui.practices/html/native/efl/component_progressbar_wn.htm
index f8c18e3..0c1cb21 100644
--- a/org.tizen.ui.practices/html/native/efl/component_progressbar_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_progressbar_wn.htm
@@ -25,8 +25,8 @@
 		
 			
            Related Info
            
@@ -45,22 +45,29 @@
 
 
            The progressbar component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.
             
 
+
            For more information, see the Progress bar API.
            
+
          
            Figure: Progressbar component
             
 
            Progressbar component
            
       
 	  
            Figure: Progressbar hierarchy
             
 
            Progressbar hierarchy
            
+  
 
 
            Adding a Progressbar Component
            
- 
-
            The following example shows how to create a progressbar component.
            
+
+
            To create a progressbar component, use the elm_progressbar_add() function:
            
+
 
             Evas_Object *pb = elm_progressbar_add(win);
 
            
 
 
            Using the Progressbar Styles
            
 
-
            The progressbar has several styles for the rectangular UI components:
            
+
            The progressbar has several styles.
            
+
              
+
            • 
+
              The following styles are available for a rectangular UI screen:
              
 
                
 
              • default
                • 
 
              • pending_list
                • 
@@ -68,49 +75,75 @@ Evas_Object *pb = elm_progressbar_add(win);
 
              • process/groupindex
                • 
 
              • process/popup/small
                • 
 
              
-
              The progressbar has several styles for the circular UI components:
              
+
              • 
+
            • 
+
              The following styles are available for a circular UI screen:
              
 
                
 
              • process
                • 
 
              • process/small
                • 
 
              
+
              • 
+
            
 
-
            Set the style of the progressbar to pending_list.
            
+
            Set the style of the progressbar to pending_list:
            
 
 
             elm_object_style_set(pb, "pending_list");
 
            
 
-
            Configuring the Progressbar for Rectangular UI Components
            
+
            Configuring the Progressbar for a Rectangular Screen
            
 
-
            The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.
            
-
            elm_progressbar_pulse_set(pb, EINA_TRUE);
+
            To configure the progressbar:
            
+
              
+
            • 
+
              Activate the progressbar pulse mode to make the progressbar loop infinitely between the start and end position:
              
+
              +elm_progressbar_pulse_set(pb, EINA_TRUE);
 elm_progressbar_pulse(pb, EINA_TRUE);
 
              
+
              • 
+
            • 
+
              Invert the progressbar. In the inverted mode the high values are on the left and the low values on the right.
              
+
              +elm_progressbar_inverted_set(pb, EINA_TRUE);
+
              
+
              • 
+
            • 
+
              Change the value with the elm_progressbar_value_set() function. The progressbar emits the changed signal when the progress value changes. In the following example, the pb progress value is set to 20%.
              
+
              +elm_progressbar_value_set(pb, 0.2);
+
              
+
              • 
+
            • 
+
              Read the current value:
              
+
              +double value = elm_progressbar_value_get(pb);
+
              
+
              • 
+
            
 
-
            The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.
            
-
            elm_progressbar_inverted_set(pb, EINA_TRUE);
            
-
-
            The progressbar emits the changed signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.
            
-
            elm_progressbar_value_set(pb, 0.2);
            
-
-
            It is possible to read the current value.
            
-
            double value = elm_progressbar_value_get(pb);
            
-
-
            Configuring the Progressbar for Circular UI Components
            
-
            The progressbar emits the changed signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.
            
+
            Configuring the Progressbar for a Circular Screen
            
 
+
            To configure the progressbar:
            
+
              
+
            • 
+
              Change the value with the elm_progressbar_value_set() function. The progressbar emits the changed signal when the progress value changes. In the following example, the pb progress value is set to 20%.
              
 
               elm_progressbar_value_set(pb, 0.2);
 
              
-
              The current value can be read.
              
+
              • 
+
            • 
+
              Read the current value:
              
 
               double value = elm_progressbar_value_get(pb);
 
              
-
+
              • 
+
            
 
 
            Using the Progressbar Callbacks
            
 
 
            The changed signal is the only signal specifically emitted by the progressbar component.
            
+
 
            The following example shows how to register a callback on this signal.
            
 
 
            @@ -120,7 +153,8 @@ double value = elm_progressbar_value_get(pb);
 
 // Callback function for the "changed" signal
 // This callback is called when the progressbar value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_radio_mn.htm b/org.tizen.ui.practices/html/native/efl/component_radio_mn.htm
index 89f3987..1499025 100644
--- a/org.tizen.ui.practices/html/native/efl/component_radio_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_radio_mn.htm
@@ -41,8 +41,10 @@
 
 
            This feature is supported in mobile applications only.
            
  
-
             This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected), an optional icon and an optional label. Even though it is usually grouped with two or more other radio objects, it can also be used alone.
            
-
            The radio component inherits from the layout component. All the layout functions can be used with radio objects.
            
+
            The radio component displays 1 or more options of which only 1 can be selected. The component is composed of an indicator (selected or unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio objects, it can also be used alone.
            
+
            The radio component inherits from the layout component, which means that layout functions can be used with radio objects.
            
+
+
            For more information, see the Radio API.
            
 
 
            Figure: Radio component
             
 
            Radio component
            
@@ -52,7 +54,7 @@
 
 
            Adding a Radio Component
            
 
-
            Create a radio component and set a label to it.
            
+
            Create a radio component and set a label to it:
            
 
             Evas_Object *radio, *parent;
 
@@ -65,15 +67,17 @@ elm_object_text_set(radio, "Radio component");
 
 
            Changing the Radio Value
            
 
-
            The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.
            
+
            One of a set of values can be selected with the radio component. Each radio object from a group of radio objects represents an integer value. In the following example, the value 1 is set to the new radio object.
            
 
             elm_radio_state_value_set(radio, 1);
 
            
 
 
            Managing the Radio Groups
            
 
-
            The following example shows how to create a group of radio objects with at least two radio components.
            
-
+
            To manage radio groups:
            
+
              
+
            1. 
+
              Create a group of radio objects with at least 2 radio components:
              
 
               // Create another radio object 
 Evas_Object *radio2 = elm_radio_add(parent);
@@ -83,18 +87,21 @@ elm_radio_state_value_set(radio2, 2);
 Evas_Object *group = radio;
 elm_radio_group_add(radio2, group);
 
              
-
-
              Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.
              
-
+
              2. 
+
            2. 
+
              Choose which of the radio components is selected. In the following example, radio2 is selected.
              
 
               elm_radio_value_set(group, 2);
 
              
-
-
              You can use the elm_radio_value_get() function to see the currently selected radio of the group. The elm_radio_value_pointer_set() function sets a pointer to an integer to change when the radio group value changes.
               
+
              3. 
+
            3. 
+
              Use the elm_radio_value_get() function to see the currently selected radio of the group. The elm_radio_value_pointer_set() function sets a pointer to an integer to change when the radio group value changes.
               
 
               int val;
 elm_radio_value_pointer_set(group, &val);
 
              
+
              4. 
+
            
 
 
            Using the Radio Callbacks
            
 
@@ -108,7 +115,8 @@ elm_radio_value_pointer_set(group, &val);
 
 // Callback function for the "changed" signal
 // This callback is called when the radio value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_radio_wn.htm b/org.tizen.ui.practices/html/native/efl/component_radio_wn.htm
index 084f687..573777f 100644
--- a/org.tizen.ui.practices/html/native/efl/component_radio_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_radio_wn.htm
@@ -27,7 +27,7 @@
 			
          • Changing the Radio Value
            • 
 			
          • Managing the Radio Groups
            • 
 			
          • Using the Radio Callbacks
            • 
-			
          • Using the Radio Callbacks with Circular UI Components
            • 
+			
          • Using the Radio Callbacks with a Circular Screen
            • 
 		
 			
            Related Info
            
 		
              
@@ -43,9 +43,10 @@
 
 
              This feature is supported in wearable applications only.
              
   
-
              This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected). Even though it is usually grouped with two or more other radio objects, it can also be used alone.
-
              
-
              The radio component inherits from the layout component. All the layout functions can be used with radio objects.
              
+
              The radio component displays 1 or more options of which only 1 can be selected. The component is composed of an indicator (selected or unselected).  Even though it is usually grouped with 2 or more other radio objects, it can also be used alone.
              
+
              The radio component inherits from the layout component, which means that layout functions can be used with radio objects.
              
+
+
              For more information, see the Radio API.
              
 
 
              Figure: Radio component
               
 
              Radio component
              
@@ -55,7 +56,7 @@
 
 
              Adding a Radio Component
              
 
-
              Create a radio component.
              
+
              Create a radio component:
              
 
               Evas_Object *radio, *parent;
 
@@ -65,15 +66,17 @@ radio = elm_radio_add(parent);
 
 
              Changing the Radio Value
              
 
-
              The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.
              
+
              One of a set of values can be selected with the radio component. Each radio object from a group of radio objects represents an integer value. In the following example, the value 1 is set to the new radio object.
              
 
               elm_radio_state_value_set(radio, 1);
 
              
 
 
              Managing the Radio Groups
              
 
-
              The following example shows how to create a group of radio objects with at least two radio components.
              
-
+
              To manage radio groups:
              
+
                
+
              1. 
+
                Create a group of radio objects with at least 2 radio components:
                
 
                 // Create another radio object 
 Evas_Object *radio2 = elm_radio_add(parent);
@@ -83,19 +86,23 @@ elm_radio_state_value_set(radio2, 2);
 Evas_Object *group = radio;
 elm_radio_group_add(radio2, group);
 
                
-
-
                Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.
                
-
-
                elm_radio_value_set(group, 2);
                
-
-
                You can use elm_radio_value_get() to see the currently selected radio of the group.
                
+
                2. 
+
              2. 
+
                Choose which of the radio components is selected. In the following example, radio2 is selected.
                
+
                +elm_radio_value_set(group, 2);
+
                
+
                3. 
+
              3. 
+
                Use the elm_radio_value_get() function to see the currently selected radio of the group.
                 
+
                4. 
+
              
 
 
              Using the Radio Callbacks
              
 
-
              This UI component emits the following signals:
              
-
              • changed: The state of a radio is modified in a group of radio objects.
              
-
+
              When the state of a radio is modified in a group of radio objects, the changed signal is emitted.
              
 
              The following example shows how to register a callback on this signal.
              
+
 
               {
    evas_object_smart_callback_add(radio, "changed", changed_cb, data);
@@ -103,21 +110,22 @@ elm_radio_group_add(radio2, group);
 
 // Callback function for the "changed" signal
 // This callback is called when the radio value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
 
              
 
-
              Using the Radio Callbacks with Circular UI Components
              
+
              Using the Radio Callbacks with a Circular Screen
              
 	
-
              This UI component emits the following signals:
              
+
              The radio component for the circular screen emits the following signals:
              
 
                
-
              • changed: The user changes the slider value.
                • 
+
              • changed: The slider value is changed.
                • 
 
              • clicked: Radio was clicked.
                • 
 
              
 
-
              The following example shows how to register a callback on this signal.
              
+
              The following example shows how to register a callback on the changed signal.
              
 
               {
    evas_object_smart_callback_add(radio, "clicked", clicked_cb, data);
@@ -125,7 +133,8 @@ void changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 // Callback function for the "changed" signal
 // This callback is called when the radio value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "This radio was clicked\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_segmentcontrol_mn.htm b/org.tizen.ui.practices/html/native/efl/component_segmentcontrol_mn.htm
index b21120f..fa0e604 100644
--- a/org.tizen.ui.practices/html/native/efl/component_segmentcontrol_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_segmentcontrol_mn.htm
@@ -41,8 +41,10 @@
 
              This feature is supported in mobile applications only.
              
 
  
-
              This UI component consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.
              
-
              This UI component inherits from the layout component, so all the layout components API can be used on segmentcontrol objects.
              
+
              The segmentcontrol component consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.
              
+
              The segmentcontrol component inherits from the layout component, which means that layout functions can be used on segmentcontrol objects.
              
+
+
              For more information, see the SegmentControl API.
              
 
 
              Figure: Segmentcontrol (with text on left and with icons on right)
               
 
              Segmentcontrol with text Segmentcontrol with icons
              
@@ -52,7 +54,7 @@
 
 
              Adding a Segmentcontrol Component
              
 
-
              The following example shows how to add a segmentcontrol component.
              
+
              To add a segmentcontrol component, use the elm_segment_control_add() function:
              
 
 
               Evas_Object *segcontrol, *parent;
@@ -62,7 +64,9 @@ segcontrol = elm_segment_control_add(parent);
 
 
              Adding Items
              
 
-
              You can add items to the UI component. In the following example four items containing only text labels (no icons) are added.
              
+
              To add items to the segmentcontrol component:
              
+
                
+
              1. Add the items. In the following example, 4 items containing only text labels (no icons) are added.
 
                 Elm_Object_Item *it;
 int count, idx;
@@ -72,48 +76,51 @@ elm_segment_control_item_add(segcontrol, NULL, "item2");
 elm_segment_control_item_add(segcontrol, NULL, "item3");
 it = elm_segment_control_item_add(segcontrol, NULL, "item4");
 
                
-
-
                You can also:
                
+
                2. 
+
              2. 
+
                Manage the items:
                
 
                  
-
                • Insert an item at a specific position starting at 0.
+
                • Insert an item at a specific position starting at 0:
 
                   elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);
 
                  • 
 
-
                • Delete an item.
+
                • Delete an item:
 
                   elm_segment_control_item_del_at(segcontrol, 2);
 
                  • 
 
-
                • Set the selected state of an item manually.
+
                • Set the selected state of an item manually:
 
                   elm_segment_control_item_selected_set(it, EINA_TRUE);
 
                  • 
-
                • Disable the whole segment control.
+
                • Disable the whole segment control:
 
                   elm_object_disabled_set(segcontrol, EINA_TRUE);
 
                  • 
-
                • Get the selected item.
+
                • Get the selected item:
 
                   it = elm_segment_control_item_selected_get(segcontrol);
 
                  • 
-
                • Get the item placed at a specified index.
+
                • Get the item placed at a specified index:
 
                   it = elm_segment_control_item_get(segcontrol, 2);
 
                  • 
-
                • Get the item count from the segment control.
+
                • Get the item count from the segment control:
 
                   count = elm_segment_control_item_count_get(segcontrol);
 
                  • 
-
                • Get the index of an item.
+
                • Get the index of an item:
 
                   idx = elm_segment_control_item_index_get(it);
 
                  • 
 
                
+
                3. 
+
              
 
 
              Using the Segmentcontrol Callbacks
              
 
-
              This is how to register a callback on the changed signal. It is called when the user clicks on a segment item which is not previously selected. The event_info parameter is the segment item pointer.
              
+
              The following example shows how to register a callback on the changed signal, which is called when the user clicks on a segment item which is not previously selected. The event_info parameter is the segment item pointer.
              
 
               {
    evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
@@ -121,7 +128,8 @@ idx = elm_segment_control_item_index_get(it);
 
 // Callback function for the "changed" signal
 // This callback is called when the segcontrol selected item changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    Elm_Object_Item *it = event_info;
    dlog_print(DLOG_INFO, LOG_TAG, "The selected segment item is %s\n",
diff --git a/org.tizen.ui.practices/html/native/efl/component_slider_mn.htm b/org.tizen.ui.practices/html/native/efl/component_slider_mn.htm
index 0cc0cca..1035d02 100644
--- a/org.tizen.ui.practices/html/native/efl/component_slider_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_slider_mn.htm
@@ -41,8 +41,9 @@
 
 
              This feature is supported in mobile applications only.
              
 
-
               The slider component is a draggable bar that is used to select a value within a certain range.
              
+
              The slider component is a draggable bar that is used to select a value within a certain range.
              
 
+
              For more information, see the Slider API.
              
 
 
              Figure: Slider component
               
 
              Slider component
              
@@ -52,7 +53,7 @@
 
 
              Adding a Slider Component
              
 
-
              The following example shows how to create a slider object.
              
+
              To create a slider object:
              
 
               Evas_Object *slider, *parent;
 
@@ -61,13 +62,13 @@ slider = elm_slider_add(parent);
 
 
              Using the Slider Styles
              
 
-
              A slider has the following styles:
              
+
              The slider has the following styles:
              
 
                
 
              • default
                • 
 
              • center_point
                • 
 
              
 
-
              The following example sets the style to center_point.
              
+
              To set the style to center_point:
              
 
               elm_object_style_set(slider, "center_point");
 
              
@@ -76,13 +77,17 @@ elm_object_style_set(slider, "center_point");
 
 
              Configuring the Slider
              
 
-
              The orientation is set with the elm_slider_horizontal_set() function, and it is inverted the same way as the progressbar component. In the following example it is set to vertical and inverted.
              
+
              To configure the slider:
              
+
                
+
              • 
+
                Set the orientation with the elm_slider_horizontal_set() function, and invert it the same way as the progressbar component. In the following example, the slider is set to vertical and inverted.
                
 
                 elm_slider_horizontal_set(slider, EINA_FALSE);
 elm_slider_inverted_set(slider, EINA_TRUE);
 
                
-
-
                The slider can contain icons (icon and end partnames), a label, a unit label, and an indicator label.
                
+
                • 
+
              • 
+
                Set icons (icon and end partnames), a label, a unit label, and an indicator label to the slider:
                
 
                 Evas_Object *icon1, *icon2;
 
@@ -96,19 +101,25 @@ elm_object_part_text_set(slider, "default", "slider label");
 // Set the unit format 
 elm_slider_unit_format_set(slider, "%1.2f meters");
 
                
-
-
                Before using the slider, its minimum and maximum values are set with elm_slider_min_max_set(). The current value is set with (elm_slider_value_set()). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.
                
+
                • 
+
              • 
+
                Set the minimum and maximum values to the slider with the elm_slider_min_max_set() function. The current value is set with the elm_slider_value_set() function. The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.
                
 
                 elm_slider_min_max_set(slider, 0.0, 100.0);
 elm_slider_value_set(slider, 50.0);
 
                
-
-
                The span of the slider represents its length horizontally or vertically. It is set with elm_slider_span_size_set() and is scaled by the object or applications scaling factor.
                
-
                You can retrieve the current value of the slider anytime.
                
+
                • 
+
              • 
+
                Retrieve the current value of the slider:
                
 
                 double value = elm_slider_value_get(slider);
 
                
-
+
                • 
+
              • 
+
                Set the slider span with the elm_slider_span_size_set() function. The span of the slider represents its length horizontally or vertically. It is scaled by the object or applications scaling factor. 
                
+
                • 
+
              • 
+
                Disable the slider indicator size.
                
 
                By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.
                
 
                 // Get the current state of the indicator 
@@ -117,10 +128,12 @@ Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
 // Invert the behavior 
 elm_slider_indicator_show_set(slider, !enlarge);
 
                
+
                • 
+
              
  
 
              Using the Slider Callbacks
              
 
-
              This UI component emits the following signals:
              
+
              The slider component emits the following signals:
              
 
                
 
              • changed: The user changes the slider value.
                • 
 
              • slider,drag,start: Dragging the slider indicator around starts.
                • 
@@ -137,7 +150,8 @@ elm_slider_indicator_show_set(slider, !enlarge);
 
 // Callback function for the "changed" signal
 // This callback is called when the slider value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_slider_wn.htm b/org.tizen.ui.practices/html/native/efl/component_slider_wn.htm
index 7817148..1fc4555 100644
--- a/org.tizen.ui.practices/html/native/efl/component_slider_wn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_slider_wn.htm
@@ -42,7 +42,9 @@
 
 
                This feature is supported in wearable applications only.
                
 
-
                 The slider component contains a draggable bar that is used to select a value within a certain range. It is used with rectangular UI components.
                
+
                The slider component contains a draggable bar that is used to select a value within a certain range. It is used with rectangular UI components.
                
+
+
                For more information, see the Slider API.
                
 
 
                Figure: Slider component
                 
 
                Slider component
                
@@ -52,7 +54,7 @@
 
 
                Adding a Slider Component
                
 
-
                The following example shows how to create a slider object.
                
+
                To create a slider object:
                
 
                 Evas_Object *slider, *parent;
 
@@ -61,14 +63,17 @@ slider = elm_slider_add(parent);
 
 
                Using the Slider Styles
                
 
-
                A slider has the following styles:
                
+
                The slider has the following styles:
                
 
                  
 
                • default
                  • 
 
                
 
 
                Configuring the Slider
                
 
-
                It can contain icons (elm.swallow.icon partname), a label, a unit label and an indicator label.
                
+
                To configure the slider:
                
+
                  
+
                • 
+
                  Set icons (elm.swallow.icon partname), a label, a unit label, and an indicator label to the slider:
                  
 
                   Evas_Object *icon1, *icon2;
 
@@ -78,19 +83,25 @@ elm_object_part_content_set(slider, "elm.swallow.icon", icon1);
 // Set the unit format 
 elm_slider_unit_format_set(slider, "%1.2f meters");
 
                  
-
-
                  Before using the slider, its minimum and maximum values are set with elm_slider_min_max_set(). The current value is set with (elm_slider_value_set()). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.
                  
+
                  • 
+
                • 
+
                  Set the minimum and maximum values to the slider with the elm_slider_min_max_set() function. The current value is set with the elm_slider_value_set() function. The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.
                  
 
                   elm_slider_min_max_set(slider, 0.0, 100.0);
 elm_slider_value_set(slider, 50.0);
 
                  
-
-
                  The span of the slider represents its length horizontally. It is set with elm_slider_span_size_set() and is scaled by the object or applications scaling factor.
                  
-
                  You can retrieve the current value of the slider anytime.
                  
+
                  • 
+
                • 
+
                  Set the slider span with the elm_slider_span_size_set() function. The span of the slider represents its length horizontally. The span is scaled by the object or applications scaling factor.
                  
+
                  • 
+
                • 
+
                  Retrieve the current value of the slider:
                  
 
                   double value = elm_slider_value_get(slider);
 
                  
-
+
                  • 
+
                • 
+
                  Disable the slider indicator size.
                  
 
                  By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.
                  
 
                   // Get the current state of the indicator 
@@ -99,10 +110,12 @@ Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
 // Invert the behavior 
 elm_slider_indicator_show_set(slider, !enlarge);
 
                  
- 
+ 
                  • 
+
                
+
 
                Using the Slider Callbacks
                
 
-
                This UI component emits the following signals:
                
+
                The slider component emits the following signals:
                
 
                  
 
                • changed: The user changes the slider value.
                  • 
 
                • slider,drag,start: Dragging the slider indicator around starts.
                  • 
@@ -119,7 +132,8 @@ elm_slider_indicator_show_set(slider, !enlarge);
 
 // Callback function for the "changed" signal
 // This callback is called when the slider value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_spinner_mn.htm b/org.tizen.ui.practices/html/native/efl/component_spinner_mn.htm
index a12b97d..21c23b2 100644
--- a/org.tizen.ui.practices/html/native/efl/component_spinner_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_spinner_mn.htm
@@ -43,8 +43,9 @@
 
 
                   The spinner component increases or decreases a numeric value with the arrow buttons.
                  
 
-
                  This UI component inherits from the layout component, so all functions concerning the layout component are used on the spinner component.
                  
+
                  The spinner component inherits from the layout component, which means that the layout component functions can also be used on the spinner component.
                  
 
+
                  For more information, see the Spinner API.
                  
 				
 
                  Figure: Spinner component
                   
 
                  Spinner component
                  
@@ -53,7 +54,8 @@
 
                  Spinner hierarchy
                  
 
 
                  Adding a Spinner Component
                  
-
                  The following example shows how to create a spinner object.
                  
+
+
                  To create a spinner object, use the elm_spinner_add() function:
                  
 
 
                   Evas_Object *spin, *parent;
@@ -63,58 +65,76 @@ spin = elm_spinner_add(parent);
 
 
                  Modifying the Spinner Styles
                  
 
-
                  The spinner component style can be set with the elm_object_style_set() function. The following styles are available:
                  
+
                  To modify the spinner styles:
                  
+
                    
+
                  • 
+
                    Set the spinner style with the elm_object_style_set() function. The following styles are available:
                    
 
                      
 
                    • default
                      • 
 
                    • vertical
                      • 
 
                    
-
                    The following example sets the vertical style on the spinner object.
                    
+
                    To set the vertical style on the spinner object:
                    
 
                     elm_object_style_set(spinner, "vertical");
 
                    
-
                    To get the current style, use the elm_object_style_get() function.
                    
+
                    • 
+
                  • 
+
                    To get the current style, use the elm_object_style_get() function:
                    
 
                     char *style = elm_object_style_get(spinner);
 
                    
+
                    • 
+
                  
 
 
                  Configuring the Spinner
                  
 
-
                  The label format is set to a different value:
                  
+
                  To configure the spinner:
                  
+
                    
+
                  • 
+
                    Set the label format to a different value:
                    
 
                     elm_spinner_label_format_set(spin, "%1.2f meters");
 
                    
-
-
                    You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:
                    
+
                    • 
+
                  • 
+
                    Determine the result of clicking the arrow buttons. In the following example, a click on an arrow increases or decreases with 2.0 units.
                    
 
                     elm_spinner_step_set(spin, 2.0);
 
                    
-
                    The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.
                    
+
                    • 
+
                  • 
+
                    Activate the wrapping mode. In this mode, the spinner wraps when it reaches its minimum or maximum value.
                    
 
                     elm_spinner_wrap_set(spin, EINA_TRUE);
 
                    
-
-
                    You can set the minimum and maximum values of the spinner.
                    
+
                    • 
+
                  • 
+
                    Set the minimum and maximum values of the spinner:
                    
 
                     elm_spinner_min_max_set(spin, -25.0, 100.0);
 
                    
-
-
                    The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.
                    
+
                    • 
+
                  • 
+
                    Set the spinner object to vertical, and modify the change interval when the user presses the arrows long so that the value changes faster:
                    
 
                     elm_object_style_set(spin, "vertical");
 elm_spinner_interval_set(spin, 0.1);
 
                    
-
-
                    If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.
                    
+
                    • 
+
                  • 
+
                    Add your own text labels, if the user has to select between text values instead of numerical values. In the following example, the spin2 object shows 3 numbers written in text characters.
                    
 
                    Evas_Object *spin2 = elm_spinner_add(parent);
 elm_spinner_min_max_set(spin2, 1, 3);
 elm_spinner_special_value_add(spin2, 1, "One");
 elm_spinner_special_value_add(spin2, 2, "Two");
 elm_spinner_special_value_add(spin2, 3, "Three");
 
                    
+
                    • 
+
                  
 
 
                  Using the Spinner Callbacks
                  
 
-
                  This UI component emits the following signals:
                  
+
                  The spinner component emits the following signals:
                  
 
                    
 
                  • changed: The spinner value changes.
                    • 
 
                  • delay,changed: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.
                    • 
@@ -130,7 +150,8 @@ elm_spinner_special_value_add(spin2, 3, "Three");
 
 // Callback function for the "delay,changed" signal
 // This callback is called a short time after the spinner value changes
-void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "The spinner value has changed\n");
 }
diff --git a/org.tizen.ui.practices/html/native/efl/component_toolbar_mn.htm b/org.tizen.ui.practices/html/native/efl/component_toolbar_mn.htm
index 5a2903c..e498003 100644
--- a/org.tizen.ui.practices/html/native/efl/component_toolbar_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_toolbar_mn.htm
@@ -44,8 +44,9 @@
 
                    This feature is supported in mobile applications only.
                    
 
 
-
                     This UI component is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.
                    
+
                    The toolbar component is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.
                    
 
+
                    For more information, see the Toolbar API.
                    
 
     
                    Figure: Toolbar component
                     
   
                    toolbar component
                     
@@ -53,9 +54,10 @@
       
                    Figure: Toolbar hierarchy
                     
   
                    Toolbar hierarchy
                     
 
+  
 
                    Adding a Toolbar Component
                    
 
-
                    Use the following function to create a toolbar.
                    
+
                    To create a toolbar, use the elm_toolbar_add() function:
                    
 
                     Evas_Object *toolbar, *parent;
 
@@ -84,7 +86,7 @@ elm_object_style_set(toolbar, "navigationbar");
 
                  • ELM_TOOLBAR_SHRINK_MENU: The toolbar creates a button to popup hidden items.
                    • 
 
                  
 
-
                  Here the toolbar is set to ELM_TOOLBAR_SHRINK_NONE.
                  
+
                  In the following example, the toolbar is set to ELM_TOOLBAR_SHRINK_NONE.
                  
 
                   elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);
 
                  
@@ -94,7 +96,7 @@ elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
 
                  
 
 
                  Adding Items to the Toolbar
                  
-
                  The following example shows how to add two items and choose the associated icon, label, and function to call when the item is clicked.
                  
+
                  The following example shows how to add 2 items and choose the associated icon, label, and function to call when the item is clicked.
                  
 
                   {
    Elm_Object_Item *home_it, *help_it;
@@ -118,13 +120,13 @@ _help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
 }
 
                  
 
-
                  An item can be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.
                  
+
                  An item can be disabled. The following example shows how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.
                  
 
                   elm_object_item_disabled_set(help_it, EINA_TRUE);
 
                  
 
 
                  Adding Items with States
                  
-
                  Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. The following example shows how to create two states to the help item with the same icon but two different labels.
                  
+
                  Items have 2 or more states. Each state has its own icon, label, and function to call when an item is clicked. The following example shows how to create 2 states to the help item with the same icon but 2 different labels.
                  
 
                   elm_toolbar_item_state_add(help_it, "help", "Help state 1",
                            _help_item_pressed_cb, NULL);
@@ -137,10 +139,10 @@ elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
 
                  
 
 
                  Using the Toolbar Callbacks
                  
-
                  This UI component emits the following signals:
                  
+
                  The toolbar component emits the following signals:
                  
 
                    
-
                  • clicked: The user clicks on a toolbar item, which is selected. event_info is an object of the type Elm_Toolbar_Item.
                    • 
-
                  • clicked,double: The user double-clicks on a toolbar item. event_info is an object of the type Elm_Toolbar_Item.
                    • 
+
                  • clicked: The toolbar item is double-clicked and selected. event_info is an object of the type Elm_Toolbar_Item.
                    • 
+
                  • clicked,double: The toolbar item is double-clicked. event_info is an object of the type Elm_Toolbar_Item.
                    • 
 
                  • longpressed: The toolbar is pressed for a certain amount of time. event_info is an object of the type Elm_Toolbar_Item.
                    • 
 
                  • language,changed: The program language changes.
                    • 
 
                  • item,focused: The item is highlighted. event_info is an object of the type Elm_Toolbar_Item.
                    • 
@@ -159,7 +161,8 @@ elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
 
 // Callback function for the "clicked" signal
 // This callback is called when a toolbar item is clicked
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+void 
+clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
    Elm_Toolbar_Item * item = event_info;
 
diff --git a/org.tizen.ui.practices/html/native/efl/component_tooltip_mn.htm b/org.tizen.ui.practices/html/native/efl/component_tooltip_mn.htm
index fe4e12e..d8c7020 100644
--- a/org.tizen.ui.practices/html/native/efl/component_tooltip_mn.htm
+++ b/org.tizen.ui.practices/html/native/efl/component_tooltip_mn.htm
@@ -46,6 +46,7 @@
 
 
                    A tooltip component is not a UI component as such, so it does not emit signals. There are no registered callbacks for it.
                    
 
+
                    For more information, see the Tooltips API.
                    
 
     
                    Figure: Tooltip component
                     
   
                    Tooltip component
                     
@@ -54,7 +55,10 @@
 
                    The tooltip component cannot be created with the elm_tooltip_add() function. This component is already contained in a parent component when it is created. You can only activate or disable it.
                    
 
 
                    Activating the Tooltip
                    
-
                    To activate the tooltip on a parent object, you can set a tooltip text to the parent object.
                    
+
+
                    To activate the tooltip on a parent object:
                    
+
                      
+
                    1. Set a tooltip text to the parent object:
 
                       Evas_Object *parent = elm_button_add(obj);
 elm_object_text_set(parent, "Parent");
@@ -80,7 +84,9 @@ void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
 }
 
                      
 
-
                      When passing content to the tooltip, the tooltip_content_cb function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an Evas_Object.
                      
+
                      When passing content to the tooltip, the tooltip_content_cb function is called each time the tooltip is shown. The role of this function is to create the content to set in the tooltip. It returns a pointer to an Evas_Object.
                      
+
                      2. 
+
                    2. 
 
                      When the tooltip disappears, the tooltip_content_del_cb function is called. This function is in charge of deleting the previously allocated Evas_Object.
                      
 
                      Once set, the tooltip can be manually hidden or shown.
                      
 
@@ -88,8 +94,9 @@ void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
 elm_object_tooltip_hide(parent);
 elm_object_tooltip_show(parent);
 
                
-
-
                The tooltip can be removed from the parent object when it is not needed.
                
+
+
              • 
+
                Remove the tooltip from the parent object when it is not needed.
                
 
                 elm_object_tooltip_unset(parent);
 
                
@@ -104,6 +111,8 @@ elm_object_tooltip_unset(parent);
      
    
            
     
 
           
   
 
  
   
             
+
+

    Configuring the Tooltip

    diff --git a/org.tizen.ui.practices/html/native/efl/component_win_mn.htm b/org.tizen.ui.practices/html/native/efl/component_win_mn.htm index 4ab5ae2..59488eb 100644 --- a/org.tizen.ui.practices/html/native/efl/component_win_mn.htm +++ b/org.tizen.ui.practices/html/native/efl/component_win_mn.htm @@ -41,15 +41,19 @@

    This feature is supported in mobile applications only.

    The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.

    -

    The window component is created with the elm_win_add() or elm_win_util_standard_add() function. The content can be added in the window with elm_win_resize_object_add() so that a window resize also resizes the content inside.

    +

    The window component is created with the elm_win_add() or elm_win_util_standard_add() function. The content can be added in the window with the elm_win_resize_object_add() function so that a window resize also resizes the content inside.

    +

    For more information, see the Win API.

    Figure: Win hierarchy

    Win hierarchy

    Adding a Window Component

    -

    Create a new window and change the title.

    +

    To add a window component:

    +

    Closing a Window

    -

    When the user closes the window outside of the program control, a delete,request signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.

    + +

    When the window is closed outside of the program control, a delete,request signal is emitted to indicate that this event occurred.

    When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is EINA_FALSE, the window is not destroyed and the program does so when required. The default is EINA_FALSE, where the window is not destroyed automatically.

    The autodel is set using the following call:

    @@ -82,6 +90,7 @@ elm_win_autodel_set(window, EINA_TRUE);
 
    To close the window, use the evas_object_del() function. The window is destroyed and the signal delete,request is sent.
    
 
 
    Using the Window Callbacks
    
+
 
    The window component emits the following signals: